JS使用getComputedStyle()方法取得CSS屬性值_javascript技巧-js教程-PHP中文網

JS使用getComputedStyle()方法取得CSS屬性值_javascript技巧

WBOY

發布： 2016-05-16 16:51:40

原創

1135 人瀏覽過

在網頁進行調試的過程中，常常會用到js來獲取元素的CSS樣式，方法有很多很多，現在僅把我常用的方法總結如下：

1. obj.style：這個方法只能JS只能取得寫在html標籤中的寫在style屬性中的值（style=”…”），而無法取得定義在

JS取得CSS屬性值

html>

2. IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法

「DOM2級樣式」增強了document. defaultView，提供了getComputedStyle()方法。這個方法接受兩個參數：要取得計算樣式的元素和一個偽元素字串（例如「:after」）。如果不需要偽元素訊息，第二個參數可以是null。 getComputerStyle()方法傳回一個CSSStyleDeclaration對象，其中包含目前元素的所有計算的樣式。以下面的HTML頁為例：

複製程式碼程式碼如下:

 
計算元素樣式

} 

} 

<script> <BR>var myDiv = document.getElementById("myDiv"); <BR>var computedStyle = document.defaultView.getComputedStyle(myDiv, null); <BR>alert(computedStyle.backgroundColor); //"red" <BR>alert(computedStyle.width); //"red" <BR>alert(computedStyle.width); //"red" <BR>alert(computedStyle.width); //"100pert; computedStyle.height); //"200px" </script>

alert(computedStyle.border); //在某些瀏覽器中是「1px solid black」

邊框屬性可能也不會返回樣式表中實際的border規則（Opera會返回，但其它瀏覽器不會）。存在這個差異的原因是不同瀏覽器解釋綜合屬性的方式不同，因為設定這種屬性實際上會涉及很多其他的屬性。在設定border時，實際上是設定了四個邊的邊框寬度、顏色、樣式屬性。因此，即使computedStyle.border不會在所有瀏覽器中都傳回值，但computedStyle.borderLeftWidth則會傳回值。需要注意的是，即使有些瀏覽器支援這種功能，但表示值的方式可能會有所區別。例如，Firefox和Safari會回傳將所有顏色轉換成RGB格式。因此，即使getComputedStyle()方法時，最好多在幾個瀏覽器中測試一下。 IE不支援getComputedStyle()方法，但它有類似的概念。在IE中，每個具有style屬性的元素還有一個currentStyle屬性。這個屬性是CSSStyleDeclaration的實例，包含目前元素全部計算後的樣式。取得這些樣式的方法差不多，如下：

複製程式碼程式碼如下:

 
var myDiv = document.getElementById("myDiv"); 
var computedStyle = myDiv.currentStyle; alert(computedStyle.backgroundColor); //"red" 
alert(computedStyle.width); //"100px" 
alert(computedStyle.height); //"200px" 
alert(computedStyle. ); //undefined 

 

與DOM版本的方式一樣，IE也沒有回傳border樣式，因為這是一個綜合屬性。

3. 我自己在寫測試case過程中寫的一個簡單的函數（適用於Chrome）：

複製程式碼複製程式碼

 程式碼如下:

 
function getCSS(div){ 
return document.defaultView.getComputedStyle (div, null); 

//return div.currentStyle;//沒用過，IE }