快捷導(dǎo)航

getComputedStyle與currentStyle獲取樣式(style/class)

更新時間：2013年03月19日 16:21:14 作者：

通過document.getElementById(element).style.xxx可以獲取元素的樣式信息但是對于通過class屬性引用的外部樣式表就獲取不到了，感興趣的朋友可以了解下

大家都知道，用document.getElementById(‘element').style.xxx可以獲取元素的樣式信息，可是它獲取的只是DOM元素style屬性里的樣式規(guī)則，對于通過class屬性引用的外部樣式表，就拿不到我們要的信息了。

DOM標(biāo)準(zhǔn)里有個全局方法getComputedStyle，可以獲取到當(dāng)前對象樣式規(guī)則信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內(nèi)邊距。但是事情還沒完，萬惡的IE不支持此方法，它有自己的一個實現(xiàn)方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作為DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內(nèi)邊距了，兼容性的寫法如下：

復(fù)制代碼代碼如下:

 
return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft; 

這樣，就能在IE及FF中返回對象的當(dāng)前樣式信息了。

特別注意一點：如果要獲取當(dāng)前對象的顏色信息，IE返回的是16進制的'#ffffff'，而FF返回的是rgb(255,255,255)

用js的style屬性可以獲得html標(biāo)簽的樣式，但是不能獲取非行間樣式。那么怎么用js獲取css的非行間樣式呢？在IE下可以用currentStyle，而在火狐下面我們需要用到getComputedStyle。下面是一個小示例：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js用currentStyle和getComputedStyle獲取css樣式</title> 
<style type="text/css"> 
#div1{width:100px; height:100px; background:red;} 
</style> 
<script type="text/javascript"> 
function getStyle(obj, attr) 
{ 
if(obj.currentStyle) 
{ 
return obj.currentStyle[attr]; 
} 
else 
{ 
return getComputedStyle(obj,false)[attr]; 
} 
} 
window.onload=function() 
{ 
var oDiv=document.getElementById('div1'); 
alert(getStyle(oDiv,'width')) 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html> 