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

這個問題是在元件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...