細說HTML元素的隱藏和顯示

2022-03-16 12:22:47 字數 1988 閱讀 1708

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...