js獲取非內部取樣式表中定義的屬性值

admin發表於2017-11-01
JS

在學習js的過程中，通常最先掌握的獲取元素樣式屬性值是使用以下方式:

[JavaScript] 純文字檢視 複製程式碼
element.style

看一段相關程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
div{ 
  height:100px; 
  margin-bottom:10px; 
  background-color:green; 
} 
#bottom{ 
  width:100px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  alert(document.getElementById("top").style.width); 
  alert(document.getElementById("bottom").style.width); 
} 
</script> 
</head> 
<body> 
  <div id="top" style="width:100px;"></div> 
  <div id="bottom"></div> 
</body> 
</html>

從以上程式碼的表現可以看出，使用element.style方式可以獲取使用style標籤在標籤內部定義的樣式屬性值，卻不能夠獲取其他方式定義的樣式屬性值，所以要獲取內聯樣式表或者外部樣式表定義的屬性值，則需要考慮使用其他方式了,下面就簡單介紹一下，由於存在瀏覽器相容性問題，所以就分組介紹一下:

IE瀏覽器下:

在IE8或者更低版本的IE瀏覽器下要使用以下方式:

[JavaScript] 純文字檢視 複製程式碼
element.currentStyle

此方式可以獲取當前物件的所有最終樣式屬性值。它能夠感知指定物件中的樣式的優先順序。

element.style與element.currentStyle的區別:

1.element.style是可讀寫的，而element.currentStyle是隻讀的。

2.element.style僅能夠獲取style屬性定義的樣式屬性值，而element.currentStyle可以獲取物件的最終屬性值。

3.element.style相容所有瀏覽器，而element.currentStyle僅被IE8或者IE8以下瀏覽器支援。

標準瀏覽器下:

W3C給予了一種標準方式:

[JavaScript] 純文字檢視 複製程式碼
window.getComputedStyle(element, pseudoElt)

以上方式可以獲取指定物件的CSS屬性物件。它具有兩個引數:

1.element：必需，是要獲取CSS屬性的物件。

2.pseudoElt:可選，一個偽元素字串（例如:after），在比較老舊的瀏覽器中此引數為必需，但是現在一般可選也沒有問題。

在很多程式碼中也有document.defaultView.getComputedStyle()形式，不過它和window.getComputedStyle()的區別可以忽略不計，因為在當前的瀏覽器中一般沒有不會有任何問題。

element.currentStyle與window.getComputedStyle()的區別:

1.IE8和IE之下瀏覽器不支援window.getComputedStyle()，其他標準瀏覽器都支援，只有IE瀏覽器支援element.currentStyle。

2.element.currentStyle不支援偽類樣式獲取，window.getComputedStyle()支援。

那麼可以整合為一個相容所有瀏覽器的程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
div{ 
  height:100px; 
  margin-bottom:10px; 
  background-color:green; 
} 
#bottom{ 
  width:100px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  function GetCurrentStyle(obj, prop){       
    if(obj.currentStyle){          
      return obj.currentStyle[prop];       
    }        
    else if(window.getComputedStyle){                 
      return window.getComputedStyle(obj,null)[prop];       
    }        
    return null;     
  }    
  var bottom=document.getElementById("bottom"); 
  alert(GetCurrentStyle(bottom,"width")) 
} 
</script> 
</head> 
<body> 
  <div id="top" style="width:100px;"></div> 
  <div id="bottom"></div> 
</body> 
</html>

以上程式碼可以相容各大瀏覽器，能夠獲取到bottom元素的width屬性值。

程式碼註釋:

1.if(obj.currentStyle)判斷瀏覽器是否支援currentStyle。

2.obj.currentStyle[prop]使用鍵/值方式訪問返回的CSS屬性物件中指定屬性的值。

3.if(window.getComputedStyle)判斷是否支援getComputedStyle。

相關文章