我们知道可以通过 obj.style.display = 'block' 来控制块级元素的显示和隐藏，当然 style 还有许多的属性比如width，height等等。但是style只能控制行间样式即<div style="width:100px"></div>这种，而一般我们的样式都写在某个样式表中style.css，这时候 style 就获取不了属性值，只能改变属性值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>test</title>
<style type="text/css">
#div1{width:100px;background:red;}
#div2{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="div1" style="height:100px;"></div><br />
<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
alert(oDiv1.style.height); //100px
alert(oDiv2.style.height); //空
}
</script>那么我们改如何获取到非行间样式呢？答案是currentStyle
从字面上的意思就是获取当前的样式，不过我觉得获取计算后的样式更妥当些，为什么？后面会讲到。我们先看下currentStyle如何使用，上面的代码稍作修改：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>test</title>
<style type="text/css">
#div1{width:100px;background:red;}
#div2{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="div1" style="height:100px;"></div><br />
<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
alert(oDiv1.style.height); //100px
alert(oDiv2.currentStyle.height); //100px
}
</script>这样就解决了非行间样式的获取，不过这里有个BUG。还是上面的代码在火狐和谷歌下面获取不到值，甚至在谷歌下面报错。这是因为 currentStyle 只有 ie 浏览器识别，火狐谷歌都不识别，但是却识别 getComputedStyle 得到计算后的样式，这也是前面我所说的为什么将它取名为获取计算后的样式的原因。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>test</title>
<style type="text/css">
#div1{width:100px;background:red;}
#div2{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="div1" style="height:100px;"></div><br />
<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
alert(oDiv1.style.height); //100px
alert(getComputedStyle(oDiv2).height); //100px
}
</script>最后为了兼容所有的浏览器，把获取样式写成函数封装起来，重新命名为 getStyle。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>test</title>
<style type="text/css">
#div1{width:100px;background:red;}
#div2{width:100px;height:100px;background:blue;}
</style>
</head>
<body>
<div id="div1" style="height:100px;"></div><br />
<div id="div2"></div>
</body>
</html>
<script type="text/javascript">
//获取非行间样式
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //for ie
} else {
return getComputedStyle(obj)[attr]; //for firefox
}
};
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
alert(getStyle(oDiv2, 'height')); //100px
}
</script>PS：建议把这个函数收入到常用函数中，方便以后调用。
PS2：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/