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

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

display:none

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

123

.hide

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

visibility:hidden

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

123

.hidden

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

opacity:0

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

123

.transparent

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

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

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

123

4567

.hiddenbox

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

123

4567

891011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

3435

3637


div 
.none 
.hidden 
.opacity0 
.height0 
style> 
div>
div>
div>
aadiv> 
script>
$(".none").on("click", function () )
$(".hidden").on("click", function () )
$(".opacity0").on("click", function () )
$(".height0").on("click", function () )
script>

這段**將四種隱藏元素的方法分別展示出來，然後繫結其點選事件，經過測試，主要有下面的結論：

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

2、visibility:hidden：無法觸發其點選事件，有一種說法是display:none是元素看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準確的，設定元素的visibility後無法觸發點選事件，說明這種方法元素也是消失了，只是依然佔據著頁面空間。

3、opacity:0：可以觸發點選事件，原因也很簡單，設定元素透明度為0後，元素只是相對於人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發點選事件

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

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

我們在上面的**中新增這樣一句**：

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

結果發現，觸發了click事件，也就是通過js可以觸發被設定為display:none的元素的事件。

所以前面無法觸發點選事件的真正原因是滑鼠無法真正接觸到被設定成隱藏的元素！！！

css3提供的transition極大地提高了網頁動畫的編寫，但並不是每一種css屬性都可以通過transition來進行動畫的。我們修改**如下：

123

4567

891011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

3435

3637

3839


div 
style> 
div>
div>
div>
aadiv> 
script>
$(".none").on("click", function () )
$(".hidden").on("click", function () )
$(".opacity0").on("click", function () )
$(".height0").on("click", function () );
})script>

經過測試，可以看到：

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

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

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

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

.fadeout

.fadeout:hover

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

來自網友們提供的技巧：

1、設定元素的position與left，top，bottom，right等，將元素移出至螢幕外

2、設定元素的position與z-index，將z-index設定成盡量小的負數

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

CSS隱藏元素的幾種方法

css隱藏元素的幾種方法

CSS隱藏元素的五種方法

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

CSS隱藏元素的幾種方法

css隱藏元素的幾種方法

CSS隱藏元素的五種方法

相關推薦