我們知道在JavaScript中獲取樣式一般用的是nodeObj.style.attr這個(gè)屬性的，但是這個(gè)屬性只能獲取行間樣式非行間樣式比如寫在樣式表中的樣式那么用nodeObj.style.attr獲取就是一個(gè)空字符。
今天我們來介紹下要獲取節(jié)點(diǎn)計(jì)算后的樣式就是不一定寫在行間樣式的方法。
1. window.getComputedStyle(obj,false)['attr']方法
這是BOM（瀏覽器window對(duì)象）提供的方法 ，所以可以直接寫成getComputedStyle(nodeObj, false)，省略前面的window對(duì)象,該方法有兩個(gè)參數(shù)，第一個(gè)是要獲取樣式的節(jié)點(diǎn)對(duì)象；第二個(gè)可以寫成任何的字符一般寫成false或者null，這里最好是用false因?yàn)橛?code>nullIE9+會(huì)有問題；后面直接跟要獲取的樣式（寫在方括號(hào)中）即可。這個(gè)方法的返回值為一個(gè)對(duì)象，為計(jì)算后的樣式的屬性值對(duì)的集合。比如要獲取某個(gè)div寬度。那么可以直接寫成
var style=getComputedStyle(div,false)['width']; alert(style);
但是IE8 以下是不支持window.getComputedStyle(obj,false)['attr']方法
2. nodeObj.currentStyle['attr'];
node.currentStyle，該屬性返回的也是是一個(gè)對(duì)象，也是計(jì)算后的樣式的屬性值對(duì)的集合。比如要獲取某個(gè)div寬度。那么可以直接寫成
var style=div.currentStyle['width']; alert(style);
3. 為了兼容性我們可以將其封裝為一個(gè)函數(shù)，提供一個(gè)統(tǒng)一的獲取計(jì)算后的樣式方法如下：
HTML
<body>
<div style="width:500px"></div>
</body>
CSS
body,*{margin: 0;padding: 0;}
div{width: 300px;height: 300px;background: blue;border: 10px solid #000;}
JS
window.onload=function(){
var div=document.getElementsByTagName("div")[0];
var style=getAttr(div,'width')
alert(style);
}
function getAttr(obj,attr){ //我們把它們封裝為一個(gè)函數(shù)，注意了在全局下定義的函數(shù)的都會(huì)默認(rèn)設(shè)置為window對(duì)象的方法，所以以后我們調(diào)用方法的時(shí)候就可以直接用然后省略前面的對(duì)象，當(dāng)然了你這樣var style=window.getAttr(div,'width');調(diào)用也是木有問題的。
var style;
if(obj.currentStyle){ //當(dāng)有這個(gè)屬性的時(shí)候currentStyle
style=obj.currentStyle[attr]; //兼容IE 我測(cè)試的是ie5+
}
else{
style=getComputedStyle(obj,false)[attr]; //主流瀏覽器
}
return style;
}
效果
效果圖
