currentStyle&getComputedStyle

標籤：style   blog   color   使用   width   io   

currentStyle：擷取計算後的樣式，也叫當前樣式、最終樣式。

優點：可以擷取元素的最終樣式，包括瀏覽器的預設值，而不像style只能擷取行間樣式，所以更常用到。
注意：不能擷取複合樣式如background屬性值，只能擷取單一樣式如background-color等。

alert (oAbc.currentStyle);
非常遺憾的是，這個好使的東西也不能被各大瀏覽器完美地支援。準確地說，在我測試的瀏覽器中，IE8和Opera 11彈出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5則彈出“undefined”。

雖然currentStyle無法適用於所有瀏覽器，但是可以根據以上測試的結果來區分開支援、不支援的瀏覽器，然後再找到相容的寫法。

1 var oAbc = document.getElementById("abc");2 if(oAbc.currentStyle) {3         //IE、Opera4         alert("我支援currentStyle");5 } else {6         //FF、chrome、safari7         alert("我不支援currentStyle");8 }

其實在FF瀏覽器中我們可以使用getComputedStyle(obj,false)來達到與IE下currentStyle相同的效果。

getComputedStyle(obj,false)：在FF新版本中只需要第一個參數，即操作對象，第二個參數寫“false”也是大家通用的寫法，目的是為了相容老版本的Firefox瀏覽器。

相容寫法：

 1 var oAbc = document.getElementById("abc"); 2 if(oAbc.currentStyle) { 3         //IE、Opera 4         //alert("我支援currentStyle"); 5         alert(oAbc.currentStyle.width); 6 } else { 7         //FF、chrome、safari 8         //alert("我不支援currentStyle"); 9         alert(getComputedStyle(oAbc,false).width);10 }

一個空白頁面中body的id=”abc”，測試以上代碼，IE和Opera彈出“auto”，其它三款瀏覽器則彈出“***px”。雖然結果不同，但是可以發現chrome和safari也都和Firefox一樣，順利地讀取到了屬性值。不支援currentStyle的三款瀏覽器(FF、chrome、safari)，都是支援getComputedStyle的。

結果表明：對瀏覽器是否支援currentStyle的判斷 + getComputedStyle，就可以做到相容各主流瀏覽器的效果。而且相容寫法並不複雜，你掌握了嗎？^_^

支援currentStyle：IE、Opera
支援getComputedStyle：FireFox、Chrome、Safari

注意最後的彈出內容，currentStyle返回瀏覽器的預設值”auto”，而getComputedStyle則返回具體的值”**px”。這應該是兩者的一個小差異，有興趣的童鞋可以一起交流研究下。