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至此,大功告成!!!