三種隱藏 HTML 元素的方式

來(lái)源于：

https://www.jianshu.com/p/99d9fcde91cb

在網(wǎng)頁(yè)應(yīng)用中，顯示/隱藏某個(gè)元素或組件是一件經(jīng)常要做的事情，尤其是在目前比較流行的單頁(yè)應(yīng)用中。

總體而言，有 3 種方式來(lái)實(shí)現(xiàn)

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

它們之間有相同點(diǎn)和不同點(diǎn)。相同點(diǎn)很簡(jiǎn)單，都能使添加了這個(gè)屬性的元素及其子元素『不被看見』。這篇文章著重來(lái)比較一下它們之間的差異。

display: none;

添加了這個(gè)屬性的元素：

• 不占據(jù)頁(yè)面空間（不影響布局），因?yàn)檫@個(gè)屬性不是讓這個(gè)元素『不可見』，而是壓根沒(méi)有把它渲染出來(lái)
• 依舊可以通過(guò) DOM API 來(lái)獲取到
• 比如把它變成 display: block;

visibility: hidden;

添加了這個(gè)屬性的元素：

• 仍占據(jù)頁(yè)面空間（影響布局），僅僅讓元素變“透明”，不畫出來(lái)罷了
• 依舊可以通過(guò) DOM API 來(lái)獲取到
• 比如把它變成 visibility: visible;

HTML5 hidden

E.g. <p hidden>hello, world!</p>

添加了這個(gè)屬性的元素：

• 不占據(jù)頁(yè)面空間（不影響布局），未被渲染出來(lái)
• 什么情況下使用？
• 當(dāng)這個(gè)元素和當(dāng)前頁(yè)面狀態(tài)不相關(guān)時(shí)
• 這個(gè)元素僅僅用來(lái)被頁(yè)面中的其它元素重復(fù)使用，提供某種信息，而非直接展示給用戶使用時(shí)
• 總之，當(dāng)此元素不應(yīng)該被用戶獲取到時(shí)使用。（因此，不能把此元素鏈接給某個(gè) href 上）
• 對(duì)比 display: none; 的優(yōu)勢(shì)在于，如果使用 display: none;，想要恢復(fù)顯示時(shí)，該恢復(fù)成哪個(gè)值呢？block 嗎？flex 嗎？不好確定。但是使用 HTML5 的 hidden 屬性就不存在這個(gè)問(wèn)題了。
• 在易用性（Accessibility）方面，標(biāo)注了 hidden 的元素不會(huì)被讀屏器讀到。
• 由于這個(gè)屬性其實(shí)是用 CSS 實(shí)現(xiàn)的，所以，如果你給帶有 HTML hidden 屬性的元素，添加了 CSS display 屬性，這個(gè) display 屬性會(huì)覆蓋掉 HTML hidden 屬性。
• 有英文閱讀能力的同學(xué)可以去 W3C文檔 查看更詳細(xì)的解釋和用例

文檔上摘取的用例之一：

<h1>The Example Game</h1>
<section><h2>Login</h2><form>
    ...
    <!-- 調(diào)用 login() 當(dāng)用戶的身份被成功檢測(cè)時(shí) --></form><script>function login() {
      // switch screensdocument.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
  </script>
</section>
<section hidden>
  ...
</section>

總結(jié)

每種用法都有自己的優(yōu)勢(shì)和劣勢(shì)，需要根據(jù)具體的業(yè)務(wù)場(chǎng)景來(lái)選擇用哪一種方式。

如有錯(cuò)誤或遺漏，歡迎指出，謝謝！

作者：Wenliang

鏈接：https://www.jianshu.com/p/99d9fcde91cb