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>

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

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

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>

假設我們要通過CSS3來做一個淡出的動畫效果，應該如下：

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

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

總結說明

本文總結說明了“隱藏”元素的幾種方式，其中最常用的還是display:none和visibility:hidden。其他的方式只能算是奇技淫巧，并不推薦使用它們來隱藏元素，它們的真正用途應該不在隱藏元素，而是通過了解這些方法的特點，挖掘出其真正的使用場景。歡迎大家交流！！

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