要想獲取HTML元素的計算樣式一直都存在很多的兼容問題，各瀏覽器都會存在一些差異，Firefox、webkit(Chrome,Safari)支持W3C標準的方法：getComputedStyle()，而IE6/7/8不支持標準的方法但是有私有的屬性來實現：currentStyle，IE9和Opera兩個都支持。有了這2個方法和屬性基本上可以滿足大多數要求了。
但是對于自適應的寬度和高度使用currentStyle就沒法獲取到計算的值，只能返回auto，而getComputedStyle()就可以返回計算的值，解決這個問題有好幾種辦法。我之前想到的是用clientWidth/clientHeight減去padding的值，這樣就可以在不支持標準方法的瀏覽器中獲取到計算的寬度和高度。前幾天看到司徒正美采用了另一種辦法，使用getBoundingClientRect()方法獲取到元素在頁面中的位置，然后right減去left就是寬度，bottom減去top就是高度。我對他的代碼做了一些小小的修改，最終代碼如下：
var val = elem.currentStyle[style];
if( val === 'auto' && (style === "width" || style === "height") ){
var rect = elem.getBoundingClientRect();
if( style === "width" ){
return rect.right - rect.left + 'px';
}else{
return rect.bottom - rect.top + 'px';
}
}
return val;
}();
};
// 調用該方法
var test = document.getElementById( 'test' ),
// 獲取計算的寬度
tWidth = getStyle( test, 'width' );
新的問題，如果元素的寬度或高度使用了em或%的單位，getComputedStyle()返回的值就會自動將em或%換成px的單位，currentStyle就不會，而如果是font-size使用em為單位，在Opera下返回的是0em，Opera真的很恐怖！
后來在使用發現中還有一些沒想到的兼容問題，今天我對原來的代碼進行了優化，并對一些常見的兼容問題進行了處理。
在javascript中“-”(中劃線或連字符)代表的是減號，而在CSS中，許多樣式屬性都有這個符號，如padding-left、font-size等，所以在javascript中如果出現如下的代碼就一個錯誤：
對于float，在javascript中屬于保留字，在javascript中設置或獲取元素的float的值，都有其他的代替寫法，在標準瀏覽器中為cssFloat，而在IE6/7/8中為styleFloat。
如果top、right、bottom、left沒有一個顯式的值，在獲取這些值的時候部分瀏覽器會返回一個auto，雖然auto這個值是一個合法的CSS屬性值，但絕不是我們想要的結果，而應該是0px。
在IE6/7/8中要設置元素的透明度需要用到濾鏡、如：filter:alpha(opacity=60)，對于標準瀏覽器直接設置opacity即可，IE9兩種寫法都支持，我對獲取元素的透明度也做了兼容處理，只要使用opacity就可以獲取到所有瀏覽器元素的透明度的值。
在IE6/7/8中獲取元素的寬度和高度已經在上篇文中介紹過了，這里就不再復述了。還有一個需要注意的地方就是，如果元素的樣式是使用style內聯的寫法，或者是已經使用javascript設置過樣式的屬性，可以使用下面的方法獲取到元素的計算樣式：
這個方法比讀取getComputedStyle或currentStyle中的屬性值都要快，應該優先使用，當然前提條件就是樣式是通過內聯的寫法設置的(使用javascript設置也是設置內聯樣式)。優化過的最終代碼如下：
下面是調用示例：
<div id="box"></div>
<script>
var box = document.getElementById( "box" );
alert( getStyle(box, "width") ); // "500px"
alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"
alert( getStyle(box, "opacity") ); // "0.6"
alert( getStyle(box, "float") ); // "none"
</script>
新聞熱點
疑難解答
