我們都知道一般在javascript中獲取樣式一般用的是nodeObj.style.attr這個屬性的，但是這個屬性只能獲取行間樣式非行間樣式比如寫在樣式表中的樣式那麼用nodeObj.style.attr獲取就是一個空字符。
今天我們來介紹下要獲取節點計算後的樣式就是不一定寫在行間樣式的方法。
1：window.getComputedStyle(obj,false)['attr']方法
這是BOM（瀏覽器window對象）提供的方法 ，所以可以直接寫成getComputedStyle(nodeObj,false)，省略前面的window對象,該方法有兩個參數，第一個是要獲取樣式的節點對象；第二個可以寫成任何的字符一般寫成false或者null，這裏最好是用false因爲用null IE9+會有問題；後面直接跟要獲取的樣式（寫在方括號中）即可。這個方法的返回值爲一個對象，爲計算後的樣式的屬性值對的集合。比如要獲取某個div寬度。那麼可以直接寫成 var style=getComputedStyle(div,false)['width']; alert(style);
但是IE8 以下是不支持window.getComputedStyle(obj,false)['attr']方法
2：nodeObj.currentStyle['attr'];
node.currentStyle，該屬性返回的也是是一個對象，也是計算後的樣式的屬性值對的集合。比如要獲取某個div寬度。那麼可以直接寫成
var style=div.currentStyle['width']; alert(style);
3:爲了兼容性我們可以將其封裝爲一個函數，提供一個統一的獲取計算後的樣式方法如下：
html:
<body>
<div style="width:500px"></div>
</body>
css:
<style type="text/css">
body,*{margin: 0;padding: 0;}
div{width: 300px;height: 300px;background: blue;border: 10px solid #000;}
</style>
js:
<script type="text/javascript">
window.οnlοad=function(){
var div=document.getElementsByTagName("div")[0];
var style=getAttr(div,'width')
alert(style);
}
//我們把它們封裝爲一個函數，注意了在全局下定義的函數的都會默認設置爲window對象的方法，所以以後我們調用方法的時候就可以直接用然後省略前面的對象，當然了你這樣var style=window.getAttr(div,'width');調用也是木有問題的。
function getAttr(obj,attr){
var style;
if(obj.currentStyle){ //當有這個屬性的時候currentStyle
style=obj.currentStyle[attr]; //兼容IE 我測試的是ie5+
}
else{
style=getComputedStyle(obj,false)[attr]; //主流瀏覽器
}
return style;
}
</script>