我們都知道一般在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.onload=function(){
var div=document.getElementsByTagName("div")[0];
var style=getAttr(div,'width')
alert(style);
}
function getAttr(obj,attr){ //我們把它們封裝為一個函數，注意了在全局下定義的函數的都會默認設置為window對象的方法，所以以后我們調用方法的時候就可以直接用然后省略前面的對象，當然了你這樣var style=window.getAttr(div,'width');調用也是木有問題的。
var style;
if(obj.currentStyle){ //當有這個屬性的時候currentStyle
style=obj.currentStyle[attr]; //兼容IE 我測試的是ie5+
}
else{
style=getComputedStyle(obj,false)[attr]; //主流瀏覽器
}
return style;
}
</script>
效果
文章列表
留言列表
