CSS隱藏屬性元素的幾種代碼和方法的對比

2024-07-11 08:40:50

字體：大中小

來源：轉載

供稿：網(wǎng)友

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

以下討論的是和CSS 隱藏元素相關的CSS隱藏屬性元素的幾種代碼和方法的對比教程文章，內容是本站精心挑選整理的教程，希望對廣大的網(wǎng)友給到幫助,下面是詳細內容：

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

幾種方法的簡單介紹

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

display:none

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

.hide {

display:none;

}

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

visibility:hidden

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

.hidden{

visibility:hidden

}

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

opacity:0

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

.transparent {

opacity:0;

}

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

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

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

.hiddenBox {

margin:0;

border:0;

padding:0;

height:0;

width:0;

overflow:hidden;

}

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

元素隱藏后的事件響應

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

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

1、display:none：元素徹底消失，很顯然不會觸發(fā)其點擊事件

2、visibility:hidden：無法觸發(fā)其點擊事件，有一種說法是display:none是元素看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準確的，設置元素的visibility后無法觸發(fā)點擊事件，說明這種方法元素也是消失了，只是依然占據(jù)著頁面空間。

3、opacity:0：可以觸發(fā)點擊事件，原因也很簡單，設置元素透明度為0后，元素只是相對于人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發(fā)點擊事件

4、height:0：將元素的高度設置為0，并且設置overflow:hidden。使用這種方法來隱藏元素，是否可以觸發(fā)事件要根據(jù)具體的情況來分析。如果元素設置了border，padding等屬性不為0，很顯然，頁面上還是能看到這個元素的，觸發(fā)元素的點擊事件完全沒有問題。如果全部屬性都設置為0，很顯然，這個元素相當于消失了，即無法觸發(fā)點擊事件。

但是這些結論真的準確嗎？

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

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

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

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

CSS3 transition對這幾種方法的影響

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

經過測試，可以看到：

1、display:none：完全不受transition屬性的影響，元素立即消失

2、visibility：hidden：元素消失的時間跟transition屬性設置的時間一樣，但是沒有動畫效果

3、opacity和height等屬性能夠進行正常的動畫效果

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