html中js获取非行间样式

js获取行间样式

直接xxx.style.xxx即可。如：

var oDiv = document.getElementById("div1");
alert(oDiv.style.width);

js获取非行间样式

var oDiv = document.getElementById("div1");
alert(oDiv.currentStyle.width);

写完再IE下运行，发现完美，但是在fireFox和chrome等浏览器下发现，没毛反应，好吧

现在这种方式在非IE浏览器上完美不兼容。

ok，我们思考一下，通常一个div或者其他标签会被各种各样的css影响，那么有没办法获取计算后的最终样式呢？答案是肯定的。

var oDiv = document.getElementById("div1");
alert(getComplutedStyle(oDiv,null).width);

运行于firefox，chrome，ie完美兼容，哈，大功告成，调到ie7试试，发现报错，擦咧。。。

事实上这种方法除了ie9,其他都没什么卵用。

好吧这个时候就简单，做下兼容就ok了

function getOutStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name]; //只兼容ie
} else {
return getComputedStyle(obj, false)[name]; //但是这个不兼容非ie9的其他ie版本
}
}
window.onload = function() {
var oDiv = document.getElementById("div1");
alert(getOutStyle(oDiv, 'background-color')); //第二个参数只能应用于单一属性，
//不能应用于复合属性，如background,主要不能适用于ie
}

ok至此，大功告成！！！