r如何擷取元素的style屬性呢?
一般我們想到的方法是使用obj.style
例如
<nav>
<div id="overflow" >
<div class="container">
<a href="index.asp">home1</a>
<a href="html5_meter.asp">previous2</a>
<a href="html5_noscript.asp">欄目3</a>
<a href="html5_noscript.asp">欄目4</a>
<a href="html5_noscript.asp">欄目5</a>
<a href="html5_noscript.asp">欄目6</a>
</div>
</nav>
我們使用js:
document.getelementbyid("overflow").style
但是發現沒有擷取到style!!!這時我們就非常納悶了,我确實在外部css檔案中編寫了overflow的樣式啊,怎麼擷取不到呢?
注意:obj.style擷取的隻是元素的内聯樣式,如果沒有設定,傳回空.
以下方法是擷取元素最終的css樣式(計算後的css樣式)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
<script type="text/javascript">
function getstyle2(obj)
{
if(obj.currentstyle===undefined)
{
return getcomputedstyle(obj);
}else{
return obj.currentstyle;//ie
}
}
window.onload=function()
var para=document.getelementsbytagname('p')[0];
var currentstyle=getstyle2(para);
alert("'"+currentstyle["color"]+"' \t\t '"+currentstyle["margin"]+"'");
</script>
<style>
p{
margin:30px;
</style>
</head>
<body>
<p style="color:red;" >
這是一個段落.
</p>
</body>
</html>
運作結果:
ie9中:
ie8中:
可見ie8和ie9的反應是相同的.
火狐中:
chrome中:
我們發現火狐中擷取不到margin屬性.但是在ie和chrome中都可以擷取到margin.
那我們換一種方式:
alert("'"+currentstyle["color"]+"' \t\t '"+currentstyle["margin-top"]+"'");
在火狐中運作結果:
可以擷取到margin-top,但是不能擷取到margin.我猜測,火狐同樣也可以擷取到margin-left,margin-right,margin-bottom.經過我的驗證,确實可以.
我進一步推理:如果我單單設定了padding,在火狐中就必須通過padding-left,padding-right,padding-top或padding-bottom來擷取了.
總結:
(1)使用obj.style不能擷取元素的最終樣式;
(2)在chrome和火狐中傳回的顔色是rgb模式,而在ie中傳回的顔色是單詞(例如"red");
(3)在火狐中無法擷取"margin"或"padding",必須通過margin-[方位]或padding-[方位]的方式來擷取.
參考:http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
http://segmentfault.com/blog/kidsamong/1190000002545307