CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?


当前回答

这种差异不仅体现在样式上,还体现在使用JavaScript操作元素时的行为上。

显示效果及副作用:无:

目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来,并且不能“跳出”这个继承); 测量不能用于目标元素,也不能用于它的后代元素——它们根本不被渲染,因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(),都返回0。

可见性的影响和副作用:隐藏:

目标元素从视图中隐藏,但没有从流中取出并影响布局,占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。

其他回答

可见性:隐藏将元素保留在页面中,并占用该空间,但不显示给用户。

显示:无将在页面中不可用,不占用任何空间。

当涉及到子节点时,有很大的不同。例如:如果你有一个父div和一个嵌套的子div。所以如果你这样写:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

在这种情况下,没有divs是可见的。但如果你这样写:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

然后子div将可见,而父div将不显示。

有一件事值得补充,尽管它没有被问到,是有第三个选项,使对象完全透明。考虑:

1 <a href="http://example.com" style="display: none;"> < / >链接。< br / > <a href="http://example.com" style="可见性:隐藏;"> < / >链接。< br / > <a href="http://example.com" style="不透明度:0;"> < / >链接。

(请务必点击上面的“运行代码片段”按钮查看结果。)

1和2之间的区别已经指出了(即2仍然占据空间)。但是,2和3之间有区别:在情况3中,鼠标停留在链接上时仍然会切换到手,用户仍然可以单击链接,Javascript事件仍然会在链接上触发。这通常不是你想要的行为(但有时可能是?)

另一个区别是,如果你选择文本,然后复制/粘贴为纯文本,你会得到以下结果:

1st link.
2nd  link.
3rd unseen link.

在情况3中,文本被复制了。也许这对于某种类型的水印是有用的,或者如果你想隐藏一个版权声明,如果一个粗心的用户复制/粘贴你的内容会显示出来?

除了所有其他答案外,IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。

它们不是同义词。

Display:none将元素从页面的正常流程中移除,允许其他元素填充。

可见性:隐藏将元素留在页面的正常流程中,这样仍然会占用空间。

想象一下,你正在游乐园排队,排队的人非常吵闹,保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。

与此类似的情况相比,如果你前面有人穿上了隐形斗篷。在观看这条线时,它看起来像有一个空白的空间,但人们无法真正填补那个空白,因为有人仍然在那里。这就像可见性:隐藏。