display：none和visibility：hidden屬性對比；visibility:coll

BearyChat 發(fā)布于2019-08-29 11:19 / 2028人閱讀

摘要：的屬性作用設置元素如何顯示。語法說到，想起它和的對比。既然說到屬性，他還有和屬性值，和對應，不需多說。由于及更早版本只支持事件冒泡，所以通過添加的事件處理程序都會被添加到冒泡階段。取得元素注意使用了帶的事件名和匿名函數(shù)

HTML的display 屬性

作用：設置元素如何顯示。
JavaScript語法：Object.style.display=value

說到display：none，想起它和visibility:hidden的對比。

display:none和visibility:hidden

隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產(chǎn)生不同的結果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

visibility:collapse

既然說到visibility屬性，他還有visible和collapse屬性值，visible和hidden對應，不需多說。collapse屬性卻很有意思，當一個元素的 visibility 屬性被設置成 collapse 值后，對于一般的元素，它的表現(xiàn)跟 hidden 是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現(xiàn)會和瀏覽器不同而變化。
在此使用FF48.0.2、Chrome 52.0.2743.116和IE8測試：

在谷歌瀏覽器里，使用 collapse 值和使用 hidden 值沒有什么區(qū)別。

在火狐瀏覽器和IE8里，使用 collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。效果類似于display：none。

test code as follows:

Fruits	Vegetables	Rocks
Apple	Celery	Granite
Orange	Cabbage	Flint

這里復習了時間冒泡和IE8的事件處理兼容。
由于 IE8 及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。DOM2標準會建議采用冒泡階段(false)，但是也可以采用捕獲階段(true）。

var btn = document.getElementById("myBtn"); //取得DOM元素
btn.attachEvent("onclick", function(){   //注意使用了帶on的事件名和匿名函數(shù)
alert("Clicked");
});

云服務器 GPU云服務器 display屬性 visible visibility hidden

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111569.html

CSS中用 opacity、visibility、display 屬性將元素隱藏的對比分析

摘要：說明用來設置透明度定義建立布局時元素生成的顯示框類型用來設置元素是否可見。總的來說，使用和屬性，自身的事件不會觸發(fā)，而使用屬性，自身綁定的事件還是會觸發(fā)的。說明 opacity 用來設置透明度 display 定義建立布局時元素生成的顯示框類型 visibility 用來設置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0...

rollback 2019-08-29 15:34 評論0 收藏0
CSS中用 opacity、visibility、display 屬性將元素隱藏的對比分析

摘要：說明用來設置透明度定義建立布局時元素生成的顯示框類型用來設置元素是否可見。總的來說，使用和屬性，自身的事件不會觸發(fā)，而使用屬性，自身綁定的事件還是會觸發(fā)的。說明 opacity 用來設置透明度 display 定義建立布局時元素生成的顯示框類型 visibility 用來設置元素是否可見。 opacity、visibility、display 這三個屬性分別取值 0...

yanest 2019-08-02 10:35 評論0 收藏0
CSS魔法堂：display:none與visibility:hidden的恩怨情仇

摘要：不耽誤表單提交數(shù)據(jù)雖然我們無法看到的元素，但當表單提交時依然會將隱藏的元素的值提交上去。讓元素在見面上不可視，但保留元素原來占有的位置。不過由于各瀏覽器實現(xiàn)效果均有出入，因此一般不會使用這個值。繼承父元素的值。前言 ?還記得面試時被問起請說說display:none和visibility:hidden的區(qū)別嗎？是不是回答完display:none不占用原來的位置，而visibilit...

selfimpr 2019-08-30 15:54 評論0 收藏0
《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏

摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結界，而自身也可能處于其他層疊結界中。上一篇：《CSS世界》筆記四：流的保護與破壞寫在前面《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內容，這里僅把后面章節(jié)相對重要的內容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...

godruoyi 2019-08-29 16:21 評論0 收藏0