我們知道可以通過 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/