CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
这种差异不仅体现在样式上,还体现在使用JavaScript操作元素时的行为上。
显示效果及副作用:无:
目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来,并且不能“跳出”这个继承); 测量不能用于目标元素,也不能用于它的后代元素——它们根本不被渲染,因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(),都返回0。
可见性的影响和副作用:隐藏:
目标元素从视图中隐藏,但没有从流中取出并影响布局,占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。
其他回答
Display:none表示所讨论的标签根本不会出现在页面上(尽管您仍然可以通过dom与它进行交互)。在其他标记之间不会为它分配空间。
可见性:隐藏意味着与display:none不同,标签是不可见的,但是在页面上为它分配了空间。标签被渲染,只是在页面上看不到。
例如:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
将[style-tag-value]替换为display:none会导致:
test | | test
用可见性替换[style-tag-value]:隐藏结果:
test | | test
这里有很多详细的答案,但我认为我应该加上这一点来解决可访问性问题,因为其中有影响。
显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。
这个问题还问了同义词。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/
Display: none将元素从页面中完全移除,并且构建页面时就好像该元素根本不存在一样。
可见性:隐藏保留文档流中的空间,即使您再也看不到它。
这取决于你在做什么,可能有也可能没有很大的区别。
它们不是同义词——display:没有一个会从页面流中移除元素,页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素,但不隐藏页面流,在页面上为其留下空间。
正如在这个堆栈的其他地方所描述的,这两者并不是同义词。Visibility:hidden将在页面上留下空白,而display:none将完全隐藏元素。我认为有必要讨论一下这是如何影响给定元素的子元素的。如果你要使用visibility:hidden,那么你可以用正确的样式显示该元素的子元素。但是对于display:none,不管你是否使用display: block | flex | inline | grid | inline-block,你都会隐藏子元素。