HTML中的隱藏技術
來源于：
https://www.jianshu.com/p/99d9fcde91cb
在網頁應用中，顯示/隱藏某個元素或組件是一件經常要做的事情，尤其是在目前比較流行的單頁應用中。
總體而言，有 3 種方式來實現
- CSS 的 display: none;
- CSS 的 visibility: hidden;
- 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 screensdocument.getElementById('login').hidden = true;
document.getElementById('game').hidden = false;
}
</script>
</section>
<section hidden>
...
</section>
總結
每種用法都有自己的優勢和劣勢，需要根據具體的業務場景來選擇用哪一種方式。
如有錯誤或遺漏，歡迎指出，謝謝！
作者：Wenliang
鏈接：https://www.jianshu.com/p/99d9fcde91cb