Javascript学习笔记、获取元素CSS样式
下面一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
height: 200px;
width: 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]; } }
