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


当前回答

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

显示效果及副作用:无:

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

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

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

其他回答

display: none; 

它将不会出现在页面上,也不会占用任何空间。

visibility: hidden; 

它隐藏了一个元素,但它仍然会占用与之前相同的空间。元素将被隐藏,但仍然会影响布局。

可见性:隐藏保留空间,而显示:无不保留空间。

无示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Display:none将隐藏元素并折叠正在占用的空间,而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。

它们不是同义词。

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

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

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

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

这里有很多详细的答案,但我认为我应该加上这一点来解决可访问性问题,因为其中有影响。

显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。

这个问题还问了同义词。indent: -9999 px;是另一个大致相等的。文本缩进的重要区别在于它通常由屏幕阅读器读取。这可能是一个有点糟糕的体验,因为用户仍然可以点击链接。

对于可访问性,我现在看到的是一种样式的组合,在对屏幕阅读器可见的情况下隐藏元素。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

一个很好的做法是创建一个“跳转到内容”链接到内容主体的锚。视力受损的用户可能不想在每个页面上都听完整的导航树。使链接在视觉上隐藏。用户只需点击标签就可以访问链接。

有关可访问性和隐藏内容的更多信息,请参见:

https://webaim.org/techniques/css/invisiblecontent/ https://webaim.org/techniques/skipnav/

显示:没有;既不会显示元素,也不会在页面上为元素分配空间,而可见性:隐藏;不会在页面上显示元素,但会在页面上分配空间。 在这两种情况下,我们都可以访问DOM中的元素。 为了更好地理解它,请查看以下代码: 显示:无vs可见性:隐藏