三種隱藏 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>

總結

每種用法都有自己的優勢和劣勢，需要根據具體的業務場景來選擇用哪一種方式。
如有錯誤或遺漏，歡迎指出，謝謝！