CSS「隱藏」元素的幾種方法的對比

一提及CSS隱藏元素，我想大部分小夥伴們都會想到的第一種方法就是設置display爲none。這是最爲人所熟知也是最經常使用的方法。我相信還有很多人想到使用設置visibility爲hidden來隱藏元素，這種方式也是經常使用的方法，並且也有不少人知道二者的不一樣。除了這兩種方法，本文還總結了一些比較不經常使用的方法，比較了這幾種「隱藏」元素方法的區別和優缺點，歡迎你們交流！！

幾種方法的簡單介紹

首先咱們分別來講說到底有哪幾種隱藏元素的方法，有一些方法是衆所周知的，還有一些算是一種技巧。

display:none

設置元素的display爲none是最經常使用的隱藏元素的方法。

1 .hide {
2     display:none;
3 }

將元素設置爲display:none後，元素在頁面上將完全消失，元素原本佔有的空間就會被其餘元素佔有，也就是說它會致使瀏覽器的重排和重繪。

visibility:hidden

設置元素的visibility爲hidden也是一種經常使用的隱藏元素的方法，和display:none的區別在於，元素在頁面消失後，其佔據的空間依舊會保留着，因此它只會致使瀏覽器重繪而不會重排。

1 .hidden{
2     visibility:hidden
3 }

visibility:hidden適用於那些元素隱藏後不但願頁面佈局會發生變化的場景

opacity:0

opacity屬性我相信你們都知道表示元素的透明度，而將元素的透明度設置爲0後，在咱們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。

1 .transparent {
2     opacity:0;
3 }

這種方法和visibility:hidden的一個共同點是元素隱藏後依舊佔據着空間，但咱們都知道，設置透明度爲0後，元素只是隱身了，它依舊存在頁面中。

設置height，width等盒模型屬性爲0

這是我總結的一種比較奇葩的技巧，簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，若是元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。

1 .hiddenBox {
2     margin:0;
3     border:0;
4     padding:0;
5     height:0;
6     width:0;
7     overflow:hidden;
8 }

這種方式既不實用，也可能存在着着一些問題。但平時咱們用到的一些頁面效果可能就是採用這種方式來完成的，好比jquery的slideUp動畫，它就是設置元素的overflow:hidden後，接着經過定時器，不斷地設置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom爲0，從而達到slideUp的效果。

元素隱藏後的事件響應

若是被隱藏的元素綁定了一些事件，咱們執行了相關操做後，這些事件是否會被響應並執行呢，看看下面的代碼：

 1 <style>
 2     div { 
 3         width: 100px; 
 4         height: 100px; 
 5         background: red; 
 6         margin: 15px; 
 7         padding: 10px; 
 8         border: 5px solid green; 
 9         display: inline-block; 
10         overflow: hidden; 
11     }
12     .none { display: none; }
13     .hidden { visibility: hidden; }
14     .opacity0 { opacity: 0; }
15     .height0 { height: 0; }  
16 </style>  
17 
18 <div class="none"></div>
19 <div class="hidden"></div>
20 <div class="opacity0"></div>
21 <div class="height0">aa</div>  
22 
23 <script src="/Scripts/jquery-1.10.2.min.js"></script>
24 <script>
25     $(".none").on("click", function () {
26         console.log("none clicked");
27     })
28     $(".hidden").on("click", function () {
29         console.log("hidden clicked");
30     })
31     $(".opacity0").on("click", function () {
32         console.log("opacity0 clicked");
33     })
34     $(".height0").on("click", function () {
35         console.log("height0 clicked");
36     })
37 </script>

這段代碼將四種隱藏元素的方法分別展現出來，而後綁定其點擊事件，通過測試，主要有下面的結論：

一、display:none：元素完全消失，很顯然不會觸發其點擊事件
二、visibility:hidden：沒法觸發其點擊事件，有一種說法是display:none是元素看不見摸不着，而visibility:hidden是看不見摸得着，這種說法是不許確的，設置元素的visibility後沒法觸發點擊事件，說明這種方法元素也是消失了，只是依然佔據着頁面空間。
三、opacity:0：能夠觸發點擊事件，緣由也很簡單，設置元素透明度爲0後，元素只是相對於人眼不存在而已，對瀏覽器來講，它仍是存在的，因此能夠觸發點擊事件
四、height:0：將元素的高度設置爲0，而且設置overflow:hidden。使用這種方法來隱藏元素，是否能夠觸發事件要根據具體的狀況來分析。若是元素設置了border，padding等屬性不爲0，很顯然，頁面上仍是能看到這個元素的，觸發元素的點擊事件徹底沒有問題。若是所有屬性都設置爲0，很顯然，這個元素至關於消失了，即沒法觸發點擊事件。

可是這些結論真的準確嗎？
咱們在上面的代碼中添加這樣一句代碼：

1 $(".none").click();

結果發現，觸發了click事件，也就是經過JS能夠觸發被設置爲display:none的元素的事件。
因此前面沒法觸發點擊事件的真正緣由是鼠標沒法真正接觸到被設置成隱藏的元素！！！

CSS3 transition對這幾種方法的影響

CSS3提供的transition極大地提升了網頁動畫的編寫，但並非每一種CSS屬性均可以經過transition來進行動畫的。咱們修改代碼以下：

 1 <style>
 2     div { 
 3         width: 100px; 
 4         height: 100px; 
 5         background: red; 
 6         margin: 15px; 
 7         padding: 10px; 
 8         border: 5px solid green; 
 9         display: inline-block; 
10         overflow: hidden; 
11         transition: all linear 2s;  
12     }
13 </style>  
14 
15 <div class="none"></div>
16 <div class="hidden"></div>
17 <div class="opacity0"></div>
18 <div class="height0">aa</div>  
19 
20 <script src="/Scripts/jquery-1.10.2.min.js"></script>
21 <script>
22 $(".none").on("click", function () {
23     console.log("none clicked");
24     $(this).css("display", "none");
25 })
26 $(".hidden").on("click", function () {
27     console.log("hidden clicked");
28     $(this).css("visibility", "hidden");
29 })
30 $(".opacity0").on("click", function () {
31     console.log("opacity0 clicked");
32     $(this).css("opacity", 0);
33 })
34 $(".height0").on("click", function () {
35     console.log("height0 clicked");
36     $(this).css({
37         "height": 0,
38     });
39 })
40 </script>

通過測試，能夠看到：
一、display:none：徹底不受transition屬性的影響，元素當即消失
二、visibility：hidden：元素消失的時間跟transition屬性設置的時間同樣，可是沒有動畫效果
三、opacity和height等屬性可以進行正常的動畫效果

假設咱們要經過CSS3來作一個淡出的動畫效果，應該以下：

1 .fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
2     .fadeOut:hover { visibility: hidden; opacity: 0; }

應該同時設置元素的visibility和opacity屬性。

總結說明

本文總結說明了「隱藏」元素的幾種方式，其中最經常使用的仍是display:none和visibility:hidden。其餘的方式只能算是奇技淫巧，並不推薦使用它們來隱藏元素，它們的真正用途應該不在隱藏元素，而是經過了解這些方法的特色，挖掘出其真正的使用場景。歡迎你們交流！！

 補充

來自評論區小夥伴們補充的技巧：

一、設置元素的position與left，top，bottom，right等，將元素移出至屏幕外

二、設置元素的position與z-index，將z-index設置成儘可能小的負數

本文地址：http://luopq.com/2016/02/15/tricks-of-hide-element/，轉載請註明