style方式獲取元素的border和background等符合屬性

antzone發表於2017-03-29

本章節介紹一下如何獲取或者設定元素的符合屬性值，因為它有一些注意點，否則可能會導致一些問題。

程式碼例項:

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

使用style方式直接按照css程式碼中書寫屬性值就可以了。

但是在獲取元素的符合屬性的時候也是如此，程式碼如下:

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

上面你的程式碼也可以實現我們的要求，但是使用getComputedStyle()方法不行。

具體可以參閱getComputedStyle()函式如何獲取border等符合屬性值一章節。

相關文章