如何区别display:none与visibility:hidden
发布网友
发布时间：2022-04-06 11:30
共2个回答
懂视网
时间：2022-04-06 15:51
还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！
深入display:none
?我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素。但为什么会这样呢？
?这个涉及到浏览器的渲染原理：浏览器会解析HTML标签生成DOM
Tree，解析CSS生成CSSOM，然后将DOM Tree和CSSOM合成生成Render Tree，元素在Render
Tree中对应0或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。而设置为display:none的元素则在Render Tree中没有生成对应的盒子模型，因此后续的布局、渲染工作自然没它什么事了，至于DOM操作还是可以的。
?但除了上面的知识点外，还有以下8个点我们需要注意的
1.原生默认display:none的元素
其实浏览器原生元素中有不少自带display:none的元素，如link,script,style,dialog,input[type=hidden]等.
2.HTML5中新增hidden布尔属性，让开发者自定义元素的隐藏性
/* 兼容原生不支持hidden属性的浏览器 */
[hidden]{
display: none;
}
<span hidden>Hide and Seek: You can't see me!</span>3.父元素为display:none，子孙元素也难逃一劫
.hidden{
display: none;
}
.visible{
display: block;
}
*** START ***
<div class="hidden">
I'm parent!
<div class="visible"> I'm son! </div>
</div>
*** END ***浏览器直接显示为
*** START *** *** END ***
4.无法获取焦点
本来无一盒，何处惹焦点呢^_^即使通过tab键也是没办法的
<!-- 真心不会获得焦点 --> <input type="hidden"> <div tabindex="1" style="display:none">hidden</div>
5.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以
由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为none时，子元素的display必定为none，因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上，因此display:none的元素无法响应事件。
6.不耽误form表单提交数据
虽然我们无法看到display:none的元素，但当表单提交时依然会将隐藏的input元素的值提交上去。
<form> <input type="hidden" name="id"> <input type="text" name="gguid" style="display:none"> </form>
7.CSS中的counter会忽略display:none的元素
.start{
counter-reset: son 0;
}
.son{
counter-increment: son 1;
}
.son::before{
content: counter(son) ". ";
}
<div class="start">
<div class="son">son1</div>
<div class="son" style="display:none">son2</div>
<div class="son">son3</div>
</div>结果就是：
1. son1 2. son3
8.Transition对display的变化不感冒
9.display变化时将触发reflow
撇开display:none，我们看看display:block表示元素位于BFC中，而display:inline则表示元素位于IFC中，也就是说display的用于就是设置元素所属的布局上下文，若修改display值则表示元素采用的布局方式已发生变化，不触发reflow才奇怪呢！
深入visibility
visibility有两个不同的作用
用于隐藏表格的行和列
用于在不触发布局的情况下隐藏元素
4个有效值
1.visible
?没什么好说的，就是在界面上显示。
2.hidden
?让元素在见面上不可视，但保留元素原来占有的位置。
3.collapse
?用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样，用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入，因此一般不会使用这个值。
4.inherit
?继承父元素的visibility值。
对比清楚display:none和visibility:hidden
?上面我们已经对display:none列出8点注意事项，那么我们仅需对照它逐一列出visibility的不就清晰可见了吗？
1.父元素为visibility:hidden，而子元素可以设置为visibility:visible并且生效
div{
border: solid 2px blue;
}
.visible{
visibility: visible;
}
.hidden{
visibility: hidden;
}
<div class="hidden">
I'm Parent.
<div class="visible">
I'm Son.
</div>
</div>结果：
2.和display:none一样无法获得焦点
3.可在冒泡阶段响应事件
由于设置为visibility:hidden的元素其子元素可以为visibility:visible，因此隐藏的元素有可能位于事件冒泡的路径上因此下面代码中，将鼠标移至.visible时，.hidden会响应hover事件显示。
div{
border: solid 2px blue;
}
.visible{
visibility: visible;
}
.hidden{
visibility: hidden;
}
.hidden:hover{
visibility: visible;
}
<div class="hidden">
I'm Parent.
<div class="visible">
I'm Son.
</div>
</div>4.和display:none一样不妨碍form表单的提交
5.CSS中的counter不会忽略
6.Transition对visibility的变化有效
7.visibility变化不会触发reflow
由于从visible设置为hidden时，不会改变元素布局相关的属性，因此不会触发reflow，只是静静地和其他渲染变化一起等待浏览器定时重绘界面。
热心网友
时间：2022-04-06 12:59
visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！
Overflow属性值{visible|hidden|scroll|auto}前提是先要*DIV的宽度（width）和高度（height）。二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。
CSS display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
具体区别请看演示代码吧：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312"> <head> <head> <title>实例演示：CSS display:none和visible:hidden的区别</title> <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"/> <metahttp-equivmetahttp-equiv="content-type"content="text/html;charset=gb2312"/> <metanamemetaname="author"content="枫岩,CnLei.y.l@gmail.com"> <metanamemetaname="copyright"content="http://www.cnlei.com"/> </head> <body> <p><ahrefahref="javascript:alert($('CnLei_1').innerHTML+'的宽度:\n' +GetXYWH($('CnLei_1')).W);">点击这里CSS display:none;</a></p> <p><ahrefahref="javascript:alert($('CnLei_2').innerHTML+'的宽度:\n' +GetXYWH($('CnLei_2')).W);">点击这里visibility:hidden;</a></p> <dividdivid="CnLei_1"style="CSS display:none;">CnLei_1</div> <dividdivid="CnLei_2"style="visibility:hidden;">CnLei_2</div> <scripttypescripttype="text/javascript"> varw3c=(document.getElementById)?true:false; varagt=navigator.userAgent.toLowerCase(); varie=((agt.indexOf("msie")!=-1) &&(agt.indexOf("opera")==-1)&&(agt.indexOf("omniweb")==-1)); varie5=(w3c&&ie)?true:false; varns6=(w3c&&(navigator.appName=="Netscape"))?true:false; function$(o){ returndocument.getElementById(o)?document.getElementById(o):o; } functionGetXYWH(o){ varo=$(o); varnLt=0; varnTop=0; varoffsetParent=o; while(offsetParent!=null&&offsetParent!=document.body){ nLt+=offsetParent.offsetLeft; nTop+=offsetParent.offsetTop; if(!ns6){ parseInt(offsetParent.currentStyle.borderLeftWidth)>0? nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):""; parseInt(offsetParent.currentStyle.borderTopWidth)>0? nTop+=parseInt(offsetParent.currentStyle.borderTopWidth):""; } offsetParentoffsetParent=offsetParent.offsetParent; } return{X:nLt,Y:nTop,W:o.offsetWidth,H:o.offsetHeight}; } </script> </body> </html>
