javascript 取得元素樣式必殺技_javascript技巧

Javascript取得CSS屬性值方法：getComputedStyle和currentStyle

1 .對於元素的內聯CSS樣式（

hello

），可以直接使用element.style.color來直接取得css屬性的值；

2. 但是對於外部定義的css樣式使用這種方式就無法獲取了，而且IE瀏覽器和其他標準瀏覽器（Firefox，Chrome ，Opera，Safari）使用的方法不一樣，IE瀏覽器使用element.currentStyle，W3C標準瀏覽器使用getComputedStyle來取得。

1. IE取得元素外部定義的CSS屬性值: element.currentStyle

currentStyle物件傳回了元素上的樣式表，但是style物件只傳回透過style標籤屬性套用到元素的內嵌樣式。

因此，透過currentStyle物件取得的樣式值可能與透過style物件取得的樣式值不同。

例如，如果段落的color屬性值透過連結或嵌入樣式表設定為紅色( red )，而不是內嵌的話，物件.currentStyle.color 將傳回正確的顏色，而物件style.color不能返回值。但是，如果使用者指定了

，currentStyle和STYLE物件都將傳回值 red。
currentStyle物件反映了樣式表中的樣式優先順序。在HTML 中此順序為：

1) 內嵌樣式

2) 樣式表規則

3) HTML 標籤屬性

4) HTML 標籤的內部定義

2. W3C取得元素外部定義的CSS屬性值: window.getComputedStyle(element, pseudoElt)
element必選，HTML元素
pseudoElt必選，取得該元素的偽類別樣式

複製程式碼 程式碼如下:

function getStyle(node, propertyle({node) >if (node.style[property]) {
return node.style[property];
}
else if (node.currentStyle) {
return node.currentStyle[property];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(node, null);
return style.getPropertyValue(propertyle); }
return null;
}