如何獲取元素最終使用的css值

2022-02-21 23:49:52 字數 2021 閱讀 9567

這個問題是在元件css載入方案中碰到的

場景:

元素的樣式我們可以寫在style裡面,也可以寫到外鏈css裡面,如果沒有設定,也會讀取瀏覽器預設的css的,現在我們要計算getcomputedstyle某個元素的最終所使用的css樣式

區別:1)style 是行內樣式的寫法,如果style 內有值的話,就會讀取出來,如果沒有,那麼就為空,可讀可寫

2)getcomputedstyle 是讀取元素的最終所使用的css的值,唯讀的

解決方案:

在ie和非ie下是不一樣的處理辦法的。

在ie下:

通過element.currentstyle 可以獲得當前元素的樣式

非ie下:

通過 document.defaultview.getcomputedstyle(element,null) 其實window下這個方法也是存在的,可以直接通過window.getcomputestyle 的方式呼叫

上述獲得的是該元素上所有使用的css樣式,但是如果要得到某個樣式呢? 在非ie下,則可以再後面加上getprototyvalue('attr') 的辦法(ie9目前也支援了這個方法),

小於ie9的方法,目前可以通過2種方式獲得,第一種方式是在後面["attr"] ,第二種方式是 在後面加上getattribute("attr"),不過這種方式要求駝峰的方式命名

綜上所述 獲取元素的最終所使用的css樣式可以這樣寫

doctype html public "-//w3c//dtd html 4.01 transitional//en" ""

>

<

html

>

<

head

>

<

title

> new document

title

>

<

meta

name

="generator"

content

="editplus"

>

<

meta

name

="author"

content

="">

<

meta

name

="keywords"

content

="">

<

meta

name

="description"

content

="">

head

>

<

body

>

<

div

id="test"

style

="float:left;color:red;backgound-color:#ddd;height:300px;width:200px;"

>test

div>

<

script

>

function

getcurrentstyle(ele,attr)

else

}vartest

=document.getelementbyid(

'test');

varstyle

=getcurrentstyle(test,

"float");

alert(style);

script

>

body

>

html

>

有一點需要注意,網上說對於float 這個屬性,在ie下是

stylefloat

,在非ie下是

cssfloat ,我在chrome17,firefox12下用cssfloat均沒有測試成功。於是我乾脆寫成「float」,ok!

如何獲取元素最終使用的css值

這個問題是在元件css載入方案中碰到的 場景 元素的樣式我們可以寫在style裡面,也可以寫到外鏈css裡面,如果沒有設定,也會讀取瀏覽器預設的css的,現在我們要計算getcomputedstyle某個元素的最終所使用的css樣式 區別 1 style 是行內樣式的寫法,如果style 內有值的話...

獲取元素CSS屬性值

domobj.style attr 只能獲取行內樣式,在現代瀏覽器中,有domobj.getcomputedstyle 方法可以獲得瀏覽器渲染計算後的屬性值。以下就不同瀏覽器中進行獲取 css 樣式進行封裝。需要規避復合值的問題 margin padding 把帶獲取到帶單位的把單位去掉 px em...

如何獲取相同元素的屬性值

舉例說明,那獲取標籤的 src 屬性。前端接收到資料後,動態生成標籤。建立標籤 demo 如果值建立了乙個我們可以通過 class 屬性直接用jquery獲取 獲取標籤src屬性 test attr src 如果建立了兩個以上我們需要通過陣列下標來獲取如 獲取標籤src屬性,其中0為陣列的下標 te...