css隱藏元素是網(wǎng)頁(yè)編寫(xiě)常用的方式,根據(jù)我的經(jīng)驗(yàn)總結(jié)了以下幾種css隱藏元素的方法.
opacityopacity屬性的隱藏方法主要是將元素透明度opacity設(shè)置為0,從而在視覺(jué)上就隱藏了元素,但是元素本身依然占據(jù)的著原有空間。
瀏覽器支持來(lái)說(shuō) IE8以以及更早的版本需要使用filter屬性代替,如: filter: Alpha(opacity=80)。
語(yǔ)法: opacity: value|inherit;
value: 透明值。可取值有 0.0 (全透明)和 1.0(不透明)。
inherit:從父元素集成opacity屬性的值。
其規(guī)定使用的CSS版本為 CSS3
JavaScript上的opacity使用方法: object.style.opacity=80。
使用示例:
.hide { opacity: 0;}displaydisplay屬性的隱藏方法主要是將元素display值設(shè)置為none,將其不可見(jiàn),連盒子模型也不生成,甚至連也不占用原有空間,使用該屬性為none時(shí)用戶(hù)對(duì)該元素的操作將不可用。
其規(guī)定使用的CSS版本為 CSS1。
JavaScript上的display隱藏時(shí)方法: object.style.display="none"。
JavaScript上的display顯示時(shí)方法: object.style.display="除none的其他值"
display的屬性值包含有: "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
使用示例:
.hide { display: none;}如果使用jQuery對(duì) 帶有display: none;的元素進(jìn)行顯示/隱藏使用: $('.element').show() / $('element').hide();
positionposition屬性的隱藏方法主要是將元素定位出可視區(qū)域,從而達(dá)到隱藏效果。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位,不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框,而不論該元素本身是什么類(lèi)型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。
該屬性的值包含有: absolute,fixed,releative,static,inherit。
其規(guī)定使用的CSS版本為 CSS2。
JavaScript上的absolute隱藏時(shí)方法: object.style.position="absolute" ,object.style.top="-99999px",object.style.left="-99999px"。
使用示例:
.hide {
position: absolute;
top: -99999px;
left: -99999px;
}
visibilityvisibility屬性的隱藏方法主要是在使用動(dòng)畫(huà)效果時(shí)使用,將該值設(shè)置為 hidden將隱藏元素及其子孫元素,如,我們需要鼠標(biāo)移動(dòng)到元素后顯示子元素,可在元素 的hover樣式設(shè)置 元素(或其子孫元素)的visibility的值 為visible即可。
該屬性的值包含有:visible,hidden,collapse,inherit。
其規(guī)定使用的CSS版本為 CSS2。
JavaScript上的absolute隱藏時(shí)方法: object.style.visibility="hidden"。
使用示例:
.hide {
visibility: hidden;
}
.show
{visibility: visible;
}
overflowoverflow屬性的隱藏方法主要是, 使用超出隱藏的方法。
使用示例:
.overflow
{ overflow: hidden;}在css中,focus的意思是“焦點(diǎn)”,是一種偽類(lèi)選擇器,作用是選取獲得焦點(diǎn)的元素;通過(guò)“:focus”選擇器可以對(duì)獲取焦點(diǎn)的元素設(shè)置樣式,語(yǔ)法為“元素:focus{css樣式代碼;}”。
在css中,focus是焦點(diǎn)的意思,通常表示的是“:focus”選擇器,“:focus”選擇器用于選取獲得焦點(diǎn)的元素。接收鍵盤(pán)事件或其他用戶(hù)輸入的元素都允許 :focus 選擇器。
1.類(lèi)選擇器(class選擇器)
基本使用:
.類(lèi)選擇器{
屬性名: 屬性值;
...}
2.id選擇器
基本使用:
#id選擇器{
屬性名: 屬性值;
...
}
3. html元素選擇器
某個(gè)html元素{
屬性名: 屬性值;
...
}
4.通配符選擇器
該選擇器可以用到所有的html元素,但是其優(yōu)先權(quán)最低
*{
屬性名: 屬性值;
...
}
要使用css對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一,一對(duì)多或者多對(duì)一的控制,這就需要用到CSS選擇器。HTML頁(yè)面中的元素就是通過(guò)CSS選擇器進(jìn)行控制的。
每一條css樣式定義由兩部分組成,形式如下:[code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。“選擇器”指明了{(lán)}中的“樣式”的作用對(duì)象,也就是“樣式”作用于網(wǎng)頁(yè)中的哪些元素。