【前端幫幫忙】第9期 你可能不知道的CSS隱藏頁面元素的方法

隱藏元素的方法有不少，使用的時候仍是要根據實際項目的需求來選擇最合適的。今天咱們一塊兒來學習一下這方面相關的知識點。

1. opacity

.hide-opacity {
  opacity: 0;
}
複製代碼

經過下面的gif圖，咱們能夠總結opacity隱藏元素有幾個特色：

• 只是視覺上的隱藏，隱藏元素的依然佔據着空間，影響其餘元素的佈局
• 依然可以響應用戶的交互
• 經過DOM依然能夠獲取該元素，能夠響應DOM事件
• 其子孫元素即便從新設置了opacity: 1也沒法顯示
• 元素和它全部的內容會被讀屏軟件閱讀（沒有測試過）

2. visibility

.hide-visibility {
  visibility: hidden;
}
複製代碼

經過下面的gif動圖，一樣咱們能夠總結出visibility隱藏元素的特色：

• 隱藏元素的依然佔據着空間，影響其餘元素的佈局
• 不會響應任何用戶交互
• 經過DOM依然能夠獲取該元素，沒法響應DOM事件
• 其子孫元素能夠經過從新設置visibility: visible來顯示
• 元素在讀屏軟件中也會被隱藏（沒有測試過）

3. display

是真正意義上的隱藏元素。

.hide-display {
  display: none;
}
複製代碼

經過下面的gif動圖，咱們能夠總結出display: none隱藏元素的特色：

• 真正意義上的隱藏，元素不會佔據任何空間
• 用戶沒法與其進行直接的交互
• 經過DOM依然能夠獲取到該元素
• 其子孫元素即便從新設置display: block也沒法顯示
• 讀屏軟件沒法讀到該元素的內容（沒有測試過）
• transition動畫會失效

4. hidden

HTML5新增的hidden屬性，能夠直接隱藏元素。

<div hidden>
  我是被隱藏的元素
</div>
複製代碼

特色：

跟display表現一致。

5. position

.hide-position {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
複製代碼

特色：

• 視覺上的隱藏，實際顯示在屏幕的可視區以外，不會佔據空間，不影響其餘元素的佈局
• 用戶沒法與其進行直接的交互
• 元素的內容能夠被讀屏軟件讀取（沒有測試過）
• 經過DOM依然能夠獲取到該元素
• 其子孫元素沒法經過從新設置對應的屬性來顯示

6. clip-path

經過裁剪元素來實現隱藏。

.hide-clip {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
複製代碼

特色：

• 視覺上的隱藏，隱藏元素的依然佔據着空間，影響其餘元素的佈局
• 用戶沒法與其進行直接的交互
• 元素的內容能夠被讀屏軟件讀取（沒有測試過）
• 經過DOM依然能夠獲取到該元素
• 其子孫元素沒法經過從新設置對應的屬性來顯示

7. overflow

經過設置元素的寬高爲0來隱藏元素。

.hide-overflow {
  width: 0;
  height: 0;
  overflow: hidden;
}
複製代碼

必須加上overflow: hidden，不然其子孫元素依然能夠顯示，下面的動圖能夠說明：

特色：

• 視覺上的隱藏，隱藏元素的不會佔據任何空間，不會影響其餘元素的佈局
• 用戶沒法與其進行直接的交互
• 元素的內容能夠被讀屏軟件讀取（沒有測試過）
• 經過DOM依然能夠獲取到該元素
• 其子孫元素沒法經過從新設置對應的屬性來顯示

8. transform

.hide-transform {
  transform: translate(-9999px, -9999px);
}
複製代碼

或者

.hide-transform {
  transform: scale(0);
}
複製代碼

特色：

• 視覺上的隱藏，隱藏元素的依然佔據着空間，影響其餘元素的佈局
• 用戶沒法與其進行直接的交互
• 元素的內容能夠被讀屏軟件讀取（沒有測試過）
• 經過DOM依然能夠獲取到該元素
• 其子孫元素沒法經過從新設置對應的屬性來顯示

其餘

若是是純文本的隱藏，能夠設置

.hide-text {
  text-indent: -9999px;
}
複製代碼

或者

.hide-text {
  font-size: 0;
}
複製代碼

還有一個是無障礙設計規範裏面的：

<div aria-hidden="true"></div>
複製代碼

差別性

上面簡單的羅列了8中隱藏元素的方式，其實給咱們視覺上的效果，這些方法均可以讓元素不可見（也就是咱們所說的隱藏）。然而，屏幕並非惟一的輸出機制，好比說屏幕上看不見的元素（隱藏的元素），其中一些依然可以被讀屏軟件閱讀出來（由於讀屏軟件依賴於可訪問性樹來闡述）。爲了消除它們之間的歧義，咱們將其歸爲三大類：

• 徹底隱藏
• 視覺上的隱藏
• 語義上的隱藏

三種類型的隱藏總結下來以下表所示：

可見性狀態	屏幕上	可訪問性樹（讀屏軟件等）
徹底隱藏	隱藏	隱藏
視覺上的隱藏	隱藏	可見
語義上的隱藏	可見	隱藏

徹底隱藏

針對上面所列的8種方法，可以實現徹底隱藏的只有下面這3種：

• display: none
• visibility: hidden
• HTML5新增的hidden屬性

視覺上的隱藏

• opacity
• position
• transform
• clip-path
• overflow

語義上的隱藏

• aria-hidden="true"

其餘區別

隱藏方式	佔據原來的空間	直接跟用戶交互	直接響應DOM事件
opacity	是	是	是
visibility	是	否	否
display	否	否	否
hidden	否	否	否
position	否	否	否
clip-path	是	否	否
overflow	否	否	否
transform	是	否	否

最後

感謝您的閱讀，但願對你有所幫助。因爲本人水平有限，若是文中有不當的地方煩請指正，感激涕零。

關注

歡迎你們關注個人公衆號前端幫幫忙，一塊兒交流學習，共同進步。

參考：

【譯】用 CSS 隱藏頁面元素的 5 種方法