- 正常浏览器
- 使用getComputedStyle()
- 这个方法是window对象的方法,可以返回一个对象,这个对象中保存着当前元素生效样式
- 参数:
1.要获取样式的元素
2.可以传递一个伪元素,一般传null
- 例子:
获取元素的宽度
getComputedStyle(box , null)["width"];
- 通过该方法读取到样式都是只读的不能修改
- IE8
- 使用currentStyle
- 语法:
元素.currentStyle.样式名
- 例子:
box.currentStyle["width"]
- 通过这个属性读取到的样式是只读的不能修改
window.onload = function(){
var bx1 = document.getElementById("box1");
document.querySelector(".btn1").onclick = function(){
bx1.style.height = "400px";
bx1.style.width = "400px";
bx1.style.backgroundColor = "red";
}
document.querySelector(".btn2").onclick = function(){
if(window.getComputedStyle){
// 正常浏览器
alert(getComputedStyle(bx1,null).backgroundColor);
}else{
//IE8
alert(bx1.currentStyle.backgroundColor);
}
}
}