getComputedStyle()獲取樣式值

admin發表於2017-03-23

本章節介紹一下getComputedStyle()函式的用法，它能夠獲取元素設定的樣式值。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>table細線表格-螞蟻部落</title> 
<style type="text/css">  
#thediv{
  width:250px;
  height:100px;
  background:green;
  margin:0px auto;
}
</style> 
</head>  
<body>  
<div id="thediv"></div>
</body>  
</html>

如果想獲取div的尺寸，應該如何寫js程式碼呢，很多人可能第一時間想到style.width或者style.height，但是這樣並不能夠實現我們的效果，因為style方式只能夠獲取<div style=""></div>這種形式定義的樣式，那麼getComputedStyle()函式就就有它的用武之地了，這裡不多介紹了，具體可以參閱getComputedStyle()和currentStyle屬性的用法一章節。

相關文章