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

時間 2019-11-29

標籤 getcomputedstyle currentstyle 獲取樣式 style class 简体版

原文原文鏈接

你們都知道，用document.getElementById(‘element').style.xxx能夠獲取元素的樣式信息，但是它獲取的只是DOM元素style屬性裏的樣式規則，對於經過class屬性引用的外部樣式表，就拿不到咱們要的信息了。

DOM標準裏有個全局方法getComputedStyle，能夠獲取到當前對象樣式規則信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內邊距。可是事情還沒完，萬惡的IE不支持此方法，它有本身的一個實現方式，那就是currentStyle，不一樣於全局方法getComputedStyle，它是做爲DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內邊距了，兼容性的寫法以下： javascript

複製代碼代碼以下:

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

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

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

用js的style屬性能夠得到html標籤的樣式，可是不能獲取非行間樣式。那麼怎麼用js獲取css的非行間樣式呢？在IE下能夠用currentStyle，而在火狐下面咱們須要用到getComputedStyle。下面是一個小示例： css

複製代碼代碼以下:

 
<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>

轉自http://www.jb51.net/article/34863.htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。