揭秘：display:none与visibility:hidden元素隐藏异同解析

2023-01-16 19:54:43

display:none 与 visibility:hidden——网页元素隐藏的艺术

什么是元素隐藏？

在网页设计中，元素隐藏是一种将元素从可视页面中移除的技术。这在各种情况下都非常有用，例如创建可展开/折叠的内容，显示/隐藏模态窗口，或者根据用户输入动态调整布局。

两种隐藏方式：display:none 与 visibility:hidden

有两种主要方法可以隐藏元素：display:none 和 visibility:hidden。它们都实现隐藏元素的目的，但它们的运作方式却截然不同。

渲染方式

display:none 从文档流中完全删除元素，意味着浏览器根本不会渲染该元素，它不占据任何空间，也不会影响其他元素的位置。相比之下，visibility:hidden 使元素在视觉上不可见，但它仍然存在于文档流中，占据着空间，尽管它不可见。

子元素的显示

display:none 隐藏父元素时，其子元素也会被隐藏。这是因为子元素从属于父元素，父元素被移除，子元素自然也就不存在了。然而，visibility:hidden 隐藏父元素时，其子元素仍然会被显示，因为它们不直接依赖于父元素的存在。

页面布局的影响

由于 display:none 从文档流中删除元素，它会影响页面布局。其他元素会重新排列以填补被移除元素留下的空间，这可能导致页面变形或出现空白区域。另一方面，visibility:hidden 不会影响页面布局，因为元素仍然占据着空间，只是不可见而已。

辅助技术支持

辅助技术，如屏幕阅读器，依赖于元素在文档流中的可见性和可访问性。display:none 隐藏的元素对于辅助技术是不可访问的，因为它从文档流中被删除。相反，visibility:hidden 隐藏的元素仍然可供辅助技术访问，因为它在文档流中仍然存在。

性能影响

display:none 通过减少浏览器需要渲染的元素数量，提高页面加载速度和性能。由于 visibility:hidden 仍然需要渲染元素，尽管它是不可见的，所以它对页面性能的影响很小。

选择合适的方式

选择使用 display:none 还是 visibility:hidden 取决于以下因素：

是否需要删除元素： 如果需要完全删除元素，使用 display:none。
是否需要保留空间： 如果需要保留元素占据的空间，使用 visibility:hidden。
辅助技术支持： 如果需要为辅助技术提供访问，使用 visibility:hidden。
性能考虑： 如果页面性能是关键，使用 display:none。

代码示例

以下代码示例演示了 display:none 和 visibility:hidden 的用法：

<button onclick="hideElement()">隐藏</button>

<p id="element">我是要隐藏的元素</p>

<script>
  function hideElement() {
    document.getElementById("element").style.display = "none";
    // 或使用visibility:hidden
    // document.getElementById("element").style.visibility = "hidden";
  }
</script>