在網(wǎng)頁(yè)應(yīng)用中窝爪，顯示/隱藏某個(gè)元素或組件是一件經(jīng)常要做的事情术荤，尤其是在目前比較流行的單頁(yè)應(yīng)用中赌朋。
總體而言墨状，有 3 種方式來(lái)實(shí)現(xiàn)
- CSS 的 display: none;
- CSS 的 visibility: hidden;
- HTML5 的 hidden 屬性（boolean）
它們之間有相同點(diǎn)和不同點(diǎn)。相同點(diǎn)很簡(jiǎn)單帅刀，都能使添加了這個(gè)屬性的元素及其子元素『不被看見(jiàn)』让腹。這篇文章著重來(lái)比較一下它們之間的差異。
display: none;
添加了這個(gè)屬性的元素：
- 不占據(jù)頁(yè)面空間（不影響布局）扣溺，因?yàn)檫@個(gè)屬性不是讓這個(gè)元素『不可見(jiàn)』骇窍，而是壓根沒(méi)有把它渲染出來(lái)
- 依舊可以通過(guò) DOM API 來(lái)獲取到
- 比如把它變成 display: block;
visibility: hidden;
添加了這個(gè)屬性的元素：
- 仍占據(jù)頁(yè)面空間（影響布局），僅僅讓元素變“透明”锥余，不畫(huà)出來(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 screens
document.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ò)誤或遺漏漂洋，歡迎指出，謝謝力喷！
