getComputedStyle() 用法

admin發表於2018-08-24

本文將通過程式碼例項詳細介紹一下getComputedStyle的用法，首先看一個初學者經常遇到的問題。

專案中，經常需要獲取元素CSS屬性值，可能會遇到後面類似情況，有時候能夠正確獲取，有時候則不能。

下面分析一下出現此問題的原因，以及解決方案，首先看一段程式碼例項：

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

程式碼執行後，順利彈出第二個div的背景顏色，第一個的沒有獲取到。

很多朋友可能認為dom.style屬性無所不能，不但能設定元素的樣式，也能夠獲取到對應的樣式值。

然而事實是，dom.style只能夠獲取通過如下方式設定的CSS屬性值：

（1）.HTML標籤的style屬性設定CSS屬性值。

（2）.dom.style.width="100px"這樣類似設定CSS屬性值。

此時，getComputedStyle方法的功能得以體現，它可以獲取元素CSS屬性的最終計算值。

語法結構：

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

引數解析:

（1）.element：必需，要獲取樣式值的元素節點物件。

（2）.pseudoElt：可選，表示指定元素節點的偽元素（:before、:after、:first-line、:first-letter等）。

瀏覽器支援：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

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

以上程式碼成功的獲取了第一個div的背景顏色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  margin-top:20px;
}
#first{background-color:red}
#first::before{
  content:"新增的內容";
  color:#0000ff;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var first=document.getElementById("first");
  var second=document.getElementById("second");
  alert(window.getComputedStyle(first,":before").color);
}
</script>
</head>
<body>
<div id="first"></div>
<div id="second" style="background-color:blue"></div>
</body>
</html>

以上程式碼可以獲取偽元素中字型顏色值（顏色會被轉換成RGB或者RGBA模式）。

不能直接獲取複合屬性值，例如padding屬性的值，只能讀paddingLeft、paddingTop等屬性。

相關文章