一、获取和修改内联样式
html
<div class="div1" style="width: 200px;">
</div>
js
var oDiv = document.getElementsByTagName("div")[0]
console.log(oDiv.style.width);//200px
oDiv.style.backgroundColor = "#000"//修改内联样式
二、获取和修改外联样式
js
这时候我们就需要用到getComputedStyle方法,它接受两个参数,第一个是目标元素,第二个是要选择的伪类,第二个参数如果不选择伪类,就填null:
var oBox = document.getElementById("box");
alert(getComputedStyle(oBox,null).width); //oBox的宽度
但是,在IE中不支持这个方法,它有自己的方法,即currentStyle:
var oBox = document.getElementById("box");
alert(oBox.currentStyle.width); //oBox的宽度
所以,我们写一个简单的兼容函数:
function getStyle( obj , attr ){
if ( window.getComputedStyle ) {
return getComputedStyle( obj , null )[attr];
}else{
return obj.currentStyle[attr];
}
}