offsetwidth和style.width的區別是什麼

admin發表於2017-02-10
上面兩個屬性的作用優點類似，都可以返回物件的寬度，但是兩者又有很大的區別，下面將通過例項簡單介紹一下它們的區別。

程式碼例項:

[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; 
  border:5px solid red; 
  background-color:green; 
  padding:3px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  alert(document.getElementById("mytest").offsetWidth); 
  alert(document.getElementById("mytest").style.width); 
} 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

以上程式碼中，offsetWidth屬性可以返回div的寬度，但是style.width並不能夠返回此div的寬度。由執行結果也可以看出offsetWidth返回的寬度值包括:border+width+padding。再來看一段程式碼:

[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; 
  border:5px solid red; 
  background-color:green; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  alert(document.getElementById("mytest").offsetWidth); 
  alert(document.getElementById("mytest").style.width); 
} 
</script> 
</head> 
<body> 
<div id="mytest" style="width:100px;width:100px;border:5px solid red;"></div> 
</body> 
</html>

在上面的程式碼中，style.width能夠獲取div的寬度，不過寬度是使用內部樣式定義的，並且此寬度就是width定義的寬度，還需要特別主要的一點是，offsetWidth獲取的是一個整數值，而style.width獲取的是一個字串，並且帶有單位。

[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; 
  border:5px solid red; 
  background-color:green; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  document.getElementById("first").offsetWidth=400; 
  document.getElementById("second").style.width="300px"; 
} 
</script> 
</head> 
<body> 
  <div id="first"></div> 
  <div id="second"></div> 
</body> 
</html>

由以上程式碼可以看出offsetWidth屬性僅是可讀的，而style.width屬性是可讀寫的。

總結如下:

1.offsetWidth屬性可以返回物件的padding+border+width屬性值之和，style.width返回值就是定義的width屬性值。

2.offsetWidth屬性僅是可讀屬性，而style.width是可讀寫的。

3.offsetWidth屬性返回值是整數，而style.width的返回值是字串。

4.style.width僅能返回以style方式定義的內部樣式表的width屬性值。

相關文章