下面一段代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
height: 200px;
200px;
}
</style>
</head>
<body>
<div id="box" style="background-color: red;">
</div>
</body>
</html>
通过下面这种方式去获取元素id="box"的CSS样式
var oBox = document.getElementById("box"); console.log(oBox.style.backgroundColor); console.log(oBox.style.height);
只能获取到行内样式"background-color: red;"的值,获取不到height: 200px;的值。
需要获取计算后的样式可以采用下面这种方法
var oBox = document.getElementById("box"); console.log(getComputedStyle(oBox).height);
getComputedStyle方法只有标准浏览器才支持,像IE8以下的低版本浏览器不支持,低版本浏览器只支持oBox.currentStyle.height
封装一个函数,兼容不同版本浏览器:
function getStyle(obj,attr){ if(window.getComputedStyle){ return window.getComputedStyle(obj)[attr]; } else{ return obj.currentStyle[attr]; } }