css文件對html的顯示和隱藏有2個屬性可供選擇:
1、display
2、visiblity
這2個有什麼區別呢?
display:
display版本:css1/css2 相容性:ie4+ ns4+ 繼承性:有語法:display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
取值:block : css1 塊物件的預設值。將物件強制作為塊物件呈遞,為物件之後新增新行
none : css1 隱藏物件。與 visibility 屬性的hidden值不同,其不為被隱藏的物件保留其物理空間
inline : css1 內聯物件的預設值。將物件強制作為內聯物件呈遞,從物件中刪除行
inline-block : ie5.5 將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內
list-item : css2 將塊物件指定為列表專案。並可以新增可選專案標誌
/** 以下值未支援 *
*/compact : css2 未支援。分配物件為塊物件或基於內容之上的內聯物件
marker : css2 未支援。指定內容在容器物件之前或之後。要使用此引數,物件必須和 :after 及 :before 偽元素一起使用
inline-table : css2 未支援。將**顯示為無前後換行的內聯物件或內聯容器
run-in : css2 未支援。分配物件為塊物件或基於內容之上的內聯物件
table : css2 未支援。將物件作為塊元素級的**顯示
table-caption : css2 未支援。將物件作為**標題顯示
table-cell : css2 未支援。將物件作為**單元格顯示
table-column : css2 未支援。將物件作為**列顯示
table-column-group : css2 未支援。將物件作為**列組顯示
table-header-group : css2 將物件作為**標題組顯示
table-footer-group : css2 將物件作為**腳注組顯示
table-row : css2 未支援。將物件作為**行顯示
table-row-group : css2 未支援。將物件作為**行組顯示
visibility:
visibility版本:css2 相容性:ie4+ ns6+ 繼承性:無語法:visibility : inherit | visible | collapse | hidden
取值:inherit : 預設值。繼承父物件的可見性
visible : 物件可視
hidden : 物件隱藏
collapse : 主要用來隱藏**的行或列。隱藏的行或列能夠被其他內容使用。對於**外的其他物件,其作用等同於 hidden。ie6及以下不支援此引數值
經過在ie、chrom、firfox中測試結果如下:
display的none會使被隱藏的物件釋放被占用的空間
visibility的hidden不會使被隱藏的物件釋放被占用的空間。
visibility的collapse在chrom下table並未釋放空間,在ie和firfox下釋放了。
翻閱了jquery的show和hide方法的原始碼,發現其控制元素顯示與否是通過display屬性來控制的。
JQuery 隱藏和顯示html元素
function if reg.test nameele.val 郵箱格式必須正確,可以不輸入 var emailele ucentermember email reg a za z0 9 a za z0 9 a za z0 9 if emailele.val reg.test emailele.v...
JS控制HTML元素的顯示和隱藏
利用來js控制頁面控制項顯示和隱藏有兩種方法,兩種方法分別利用html的style中的兩個屬性,兩種方法的不同之處在於控制項隱藏後是否還在頁面上佔空位。方法一 document.getelementbyid eleid style.visibility hidden document.getelem...
JS控制HTML元素的顯示和隱藏
利用來js控制頁面控制項顯示和隱藏有兩種方法,兩種方法分別利用html的style中的兩個屬性,兩種方法的不同之處在於控制項隱藏後是否還在頁面上佔空位。方法一 該方法實現隱藏後,頁面的位置還被控制項占用,顯示空白。方法二 該方法實現隱藏後,頁面的位置不被占用。document.getelementb...