三种隐藏 HTML 元素的方式

在网页应用中，显示/隐藏某个元素或组件是一件经常要做的事情，尤其是在目前比较流行的单页应用中。

总体而言，有 3 种方式来实现

1. CSS 的 display: none;
2. CSS 的 visibility: hidden;
3. HTML5 的 hidden 属性（boolean）

它们之间有相同点和不同点。相同点很简单，都能使添加了这个属性的元素及其子元素『不被看见』。这篇文章着重来比较一下它们之间的差异。

---

display: none;

添加了这个属性的元素：

• 不占据页面空间（不影响布局），因为这个属性不是让这个元素『不可见』，而是压根没有把它渲染出来
• 依旧可以通过 DOM API 来获取到
  • 比如把它变成 display: block;

visibility: hidden;

添加了这个属性的元素：

• 仍占据页面空间（影响布局），仅仅让元素变“透明”，不画出来罢了
• 依旧可以通过 DOM API 来获取到
  • 比如把它变成 visibility: visible;

HTML5 hidden

E.g. <p hidden>hello, world!</p>
添加了这个属性的元素：

• 不占据页面空间（不影响布局），未被渲染出来
• 什么情况下使用？
  • 当这个元素和当前页面状态不相关时
  • 这个元素仅仅用来被页面中的其它元素重复使用，提供某种信息，而非直接展示给用户使用时
  • 总之，当此元素不应该被用户获取到时使用。（因此，不能把此元素链接给某个 href 上）
• 对比 display: none; 的优势在于，如果使用 display: none;，想要恢复显示时，该恢复成哪个值呢？block 吗？flex 吗？不好确定。但是使用 HTML5 的 hidden 属性就不存在这个问题了。
• 在易用性（Accessibility）方面，标注了 hidden 的元素不会被读屏器读到。
• 由于这个属性其实是用 CSS 实现的，所以，如果你给带有 HTML hidden 属性的元素，添加了 CSS display 属性，这个 display 属性会覆盖掉 HTML hidden 属性。
• 有英文阅读能力的同学可以去 W3C文档 查看更详细的解释和用例

文档上摘取的用例之一：

<h1>The Example Game</h1>
<section>
  <h2>Login</h2>
  <form>
    ...
    <!-- 调用 login() 当用户的身份被成功检测时 -->
  </form>
  <script>
    function login() {
      // switch screens
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
  </script>
</section>
<section hidden>
  ...
</section>

---

总结

每种用法都有自己的优势和劣势，需要根据具体的业务场景来选择用哪一种方式。
如有错误或遗漏，欢迎指出，谢谢！