欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS“隱藏”元素的多種方法的對比

  發(fā)布時間：2016-02-17 10:25:11   作者：佚名   我要評論
這篇文章主要為大家介紹了CSS“隱藏”元素的多種方法，并對CSS“隱藏”元素的多種方法進(jìn)行對比，感興趣的小伙伴們可以參考一下

一說起CSS隱藏元素，我想大部分小伙伴們都會想到的第一種方法就是設(shè)置display為none。這是最為人所熟知也是最常用的方法。我相信還有不少人想到使用設(shè)置visibility為hidden來隱藏元素，這種方式也是常用的方法，而且也有很多人知道兩者的不同。除了這兩種方法，本文還總結(jié)了一些比較不常用的方法，比較了這幾種“隱藏”元素方法的區(qū)別和優(yōu)缺點，歡迎大家交流?。?/p>

幾種方法的簡單介紹

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

display:none

設(shè)置元素的display為none是最常用的隱藏元素的方法。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .hide {   
  2.     display:none;   
  3. }  

將元素設(shè)置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導(dǎo)致瀏覽器的重排和重繪。

visibility:hidden

設(shè)置元素的visibility為hidden也是一種常用的隱藏元素的方法，和display:none的區(qū)別在于，元素在頁面消失后，其占據(jù)的空間依舊會保留著，所以它只會導(dǎo)致瀏覽器重繪而不會重排。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .hidden{   
  2.     visibility:hidden  
  3. }  

visibility:hidden適用于那些元素隱藏后不希望頁面布局會發(fā)生變化的場景

opacity:0

opacity屬性我相信大家都知道表示元素的透明度，而將元素的透明度設(shè)置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .transparent {   
  2.    opacity:0;   
  3. }   

這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁面中。

設(shè)置height，width等盒模型屬性為0
這是我總結(jié)的一種比較奇葩的技巧，簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .hiddenBox {   
  2.     margin:0;   
  3.     border:0;   
  4.     padding:0;   
  5.     height:0;   
  6.     width:0;   
  7.     overflow:hidden;   
  8. }   

這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是采用這種方式來完成的，比如jquery的slideUp動畫，它就是設(shè)置元素的overflow:hidden后，接著通過定時器，不斷地設(shè)置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom為0，從而達(dá)到slideUp的效果。

元素隱藏后的事件響應(yīng)

如果被隱藏的元素綁定了一些事件，我們執(zhí)行了相關(guān)操作后，這些事件是否會被響應(yīng)并執(zhí)行呢，看看下面的代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  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>   
  38.   

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

1、display:none：元素徹底消失，很顯然不會觸發(fā)其點擊事件
2、visibility:hidden：無法觸發(fā)其點擊事件，有一種說法是display:none是元素看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準(zhǔn)確的，設(shè)置元素的visibility后無法觸發(fā)點擊事件，說明這種方法元素也是消失了，只是依然占據(jù)著頁面空間。
3、opacity:0：可以觸發(fā)點擊事件，原因也很簡單，設(shè)置元素透明度為0后，元素只是相對于人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發(fā)點擊事件
4、height:0：將元素的高度設(shè)置為0，并且設(shè)置overflow:hidden。使用這種方法來隱藏元素，是否可以觸發(fā)事件要根據(jù)具體的情況來分析。如果元素設(shè)置了border，padding等屬性不為0，很顯然，頁面上還是能看到這個元素的，觸發(fā)元素的點擊事件完全沒有問題。如果全部屬性都設(shè)置為0，很顯然，這個元素相當(dāng)于消失了，即無法觸發(fā)點擊事件。

但是這些結(jié)論真的準(zhǔn)確嗎？

我們在上面的代碼中添加這樣一句代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. $(".none").click();   

結(jié)果發(fā)現(xiàn)，觸發(fā)了click事件，也就是通過JS可以觸發(fā)被設(shè)置為display:none的元素的事件。

所以前面無法觸發(fā)點擊事件的真正原因是鼠標(biāo)無法真正接觸到被設(shè)置成隱藏的元素?。?！

CSS3 transition對這幾種方法的影響

CSS3提供的transition極大地提高了網(wǎng)頁動畫的編寫，但并不是每一種CSS屬性都可以通過transition來進(jìn)行動畫的。我們修改代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  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>   
  41.   

經(jīng)過測試，可以看到：

1、display:none：完全不受transition屬性的影響，元素立即消失
2、visibility：hidden：元素消失的時間跟transition屬性設(shè)置的時間一樣，但是沒有動畫效果
3、opacity和height等屬性能夠進(jìn)行正常的動畫效果

假設(shè)我們要通過CSS3來做一個淡出的動畫效果，應(yīng)該如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }   
  2. fadeOut:hover { visibility: hidden; opacity: 0; }  

應(yīng)該同時設(shè)置元素的visibility和opacity屬性。

本文總結(jié)說明了“隱藏”元素的幾種方式，其中最常用的還是display:none和visibility:hidden。其他的方式只能算是奇技淫巧，并不推薦使用它們來隱藏元素，它們的真正用途應(yīng)該不在隱藏元素，而是通過了解這些方法的特點，挖掘出其真正的使用場景。歡迎大家交流?。?br />
來自小伙伴們補充的技巧：

1、設(shè)置元素的position與left，top，bottom，right等，將元素移出至屏幕外

2、設(shè)置元素的position與z-index，將z-index設(shè)置成盡量小的負(fù)數(shù)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • css 元素顯示隱藏的9種思路

    這篇文章主要介紹了css 元素顯示隱藏的9種思路,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-07

  • 使用CSS隱藏元素滾動條的示例代碼

    這篇文章主要介紹了使用CSS隱藏元素滾動條的示例代碼,需要的朋友可以參考下
    2019-07-10

  • CATIA裝配體中的所有參考元素怎么隱藏?

    CATIA裝配體中的所有參考元素怎么隱藏？CATIA轉(zhuǎn)配體中有很多參考元素，看上去工程圖很亂，想要統(tǒng)一隱藏所有的參考元素，該怎么隱藏呢？下面我們就來看看詳細(xì)的教程，需要的
    2017-12-08

  • CSS隱藏頁面元素的5種方法

    這篇文章主要為大家詳細(xì)介紹了CSS隱藏頁面元素的5種方法，大家可以根據(jù)具體情況選擇適合的方法來隱藏元素，感興趣的小伙伴們可以參考一下
    2016-07-06

  • 隱藏 Web 中的元素方法及優(yōu)缺點教程詳解

    這篇文章主要介紹了隱藏 Web 中的元素方法及優(yōu)缺點教程，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-13

最新評論