js如何獲取樣式表中定義的css屬性值

admin發表於2017-03-19
JSCSS

有時候我們可能需要獲取定義在元素的上的樣式值，如果是用obj.style.prop這種方式定義的樣式值，可以使用以下方式獲取。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">
window.onload=function(){
  var thediv=document.getElementById("thediv");
  thediv.innerHTML=thediv.style.color;
}
</script> 
</head> 
<body> 
<div id="thediv" style="color:blue">螞蟻部落</div>
</body> 
</html>

以上程式碼可以將div的color屬性值寫入div中。通過style方式只能夠獲取使用style方式定義的樣式屬性值，對於在樣式表中定義的屬性就無能為力了，下面就通過程式碼例項介紹一下如何獲取樣式表中定義的屬性值。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  margin:5px;
  padding:5px;
  height:100px;
  width:200px;
  background-position:10px 20px;
}
a {
  border:1px solid #ccc;
  border-radius:3px;
  padding:3px 5px;
  margin:5px 0;
  display:inline-block;
  background:#eee;
  color:#f60;
  text-decoration:none;
  font-size:12px;
}
a:hover{
  color:#ff0000;
  background:#fff;
}
</style>
<script type="text/javascript">
function getStyle(obj,attr){
  var ie = !+"\v1";
  if(attr=="backgroundPosition"){
    if(ie){        
      return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
    }
  }
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }
  else{
    return document.defaultView.getComputedStyle(obj,null)[attr];
  }
}
function getCss(obj,attr){
  obj.innerHTML=getStyle(obj,attr)
}
window.onload=function(){
  var thediv=document.getElementById("box"); 
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    getCss(thediv,"padding");
  }
}
</script>
</head>
<body>
<div id="box">螞蟻部落歡迎您</div>
<input type="button" id="bt" value="檢視結果"/>
</body>
</html>

以上程式碼實現了我們的要求，可以獲取樣式表中定義的屬性，下面就介紹一下它的實現過程。

一.程式碼註釋:

1.function getStyle(obj,attr){}，獲取指定物件指定CSS屬性值，第一個引數是要獲取css屬性值的物件，第二個是指定的屬性。

2.var ie = !+"\v1"，可以判斷是否是IE8和IE8以下瀏覽器。

3.if(attr=="backgroundPosition")，判斷是否是要獲取背景座標屬性值。

4.if(ie){return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;},如果是IE8和IE8以下瀏覽器，則使用backgroundPositionX 和backgroundPositionY屬性獲取相應座標，因為IE8和IE8以下瀏覽器不支援backgroundPosition此種寫法。

5.if(obj.currentStyle){return obj.currentStyle[attr];}，判斷當前瀏覽器是否支援currentStyle屬性，如果支援則使用相應的方法獲得屬性值。

6.else{return document.defaultView.getComputedStyle(obj,null)[attr]}，如果不支援則使用另一種方式獲取相應屬性值。

二.相關閱讀:

1.getComputedStyle()和currentStyle可以參閱getComputedStyle()和currentStyle屬性的用法一章節。

2.innerHTML屬性可以參閱js innerHTML一章節。 

相關文章