在說(shuō)js獲取元素樣式之前，簡(jiǎn)單地談一下樣式

樣式分三種
外部樣式 External Style Sheet
以CSS為擴(kuò)展名的文件（又稱為"超文本樣式表"文件），它的作用范圍可以是多張網(wǎng)頁(yè)，或整個(gè)網(wǎng)站，甚至不同的網(wǎng)站。與網(wǎng)頁(yè)鏈接后，才能應(yīng)用。
嵌入式樣式 internal Style Sheet
包含在網(wǎng)頁(yè)內(nèi)部的樣式設(shè)置，它的作用范圍僅限于嵌入的網(wǎng)頁(yè)。
內(nèi)聯(lián)式樣式 inline Style
在HTML文檔中，內(nèi)聯(lián)式樣式表的格式化信息直接插入所應(yīng)用的網(wǎng)頁(yè)元素的HTML標(biāo)簽中，作為其HTML標(biāo)簽的屬性參數(shù)。嚴(yán)格地說(shuō)，內(nèi)聯(lián)樣式表稱不上表，僅僅是一條HTML標(biāo)記。
當(dāng)出現(xiàn)相同的樣式時(shí)，優(yōu)先級(jí)是內(nèi)聯(lián)大于嵌入式樣式, 嵌入式樣式大于外部樣式。
---------------------------------------------------------------
當(dāng)js獲取這三種樣式時(shí),style只能獲取內(nèi)聯(lián)樣式，獲取不到外部樣式和嵌入式樣式,因此要用currentStyle屬性，而currentStyle在FF下不支持
下面介紹二種 兼容FF和IE和正確獲取樣式的方法

方法二:

講述一下getComputedStyle函數(shù)的用法
這個(gè)函數(shù)有兩個(gè)參數(shù)：
第一個(gè)參數(shù)為需要獲取樣式的元素對(duì)象；
第二個(gè)參數(shù)為偽元素，如:hover, :first-letter, :before等等，
如果不需要偽元素則該參數(shù)為null。
getComputedStyle()函數(shù)可以從 document.defaultView 對(duì)象中訪問(wèn)到，即可以這樣調(diào)用該函數(shù)
--------------------------------------------------------------------------------------------

順便說(shuō)一下runtimeStyle屬性，首頁(yè)該屬性只在IE中支持,在FF不支持
runtimeStyle 運(yùn)行時(shí)的樣式！如果與style的屬性重疊，將覆蓋style的屬性！
意思就是當(dāng)指定了runtimeStyle，那么當(dāng)前顯示的樣式以runtimeStyle為準(zhǔn)，如果取消了runtimeStyle，那么當(dāng)前顯示樣式就恢復(fù)到currentStyle的樣式。
案例:
設(shè)置document.getElementById("eyejs").runtimeStyle.width="400px"; 那該元素的寬度就是400px,，將覆蓋style的屬性
案例分析打包下載

最新評(píng)論