offsetwidth與style.width 區別

admin發表於2018-12-05

JavaScript中很多屬性的功能比較類似，當然它們之間是有區別的，否則就是設計錯誤了。

如果是有經驗的程式設計師，從兩者名稱大體可以猜測到區別，當然這需要一個積累過程。

下面詳細介紹一下標題中兩屬性的區別，期望能夠達到舉一反三的效果。

offsetwidth與style.width都可以返回表示元素"寬度"的資料。

非常相似，但是區別也是十分明顯，下面通過程式碼例項做一下介紹。

關於兩個屬性的基本用法參閱如下兩篇文章：

（1）.JavaScript offsetWidth一章節。

（2）.JavaScript style 屬性一章節。

一.寬度所涵蓋內容的區別：

雖然兩者都可以返回表示元素寬度的一個值，但是所涵蓋的內容並不相同。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  odiv.innerHTML=str;
} 
</script> 
</head> 
<body> 
<div id="ant" style="width:200px;
                     height:50px; 
                     border:5px solid red; 
                     background-color:green; 
                     padding:3px"></div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/06/000043n44hzup189fk4sfj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.offsetwidth屬性返回值涵蓋元素的width+border+padding。

（2）.style.width屬性返回值僅包含元素的width屬性值。

（3）.offsetwidth屬性返回值是數字，不帶單位，style.width返回值帶有單位。

二.兩個屬性的可讀寫性：

下面不再使用程式碼演示，直接給出結論。

（1）.style.width屬性是可讀寫的。

（2）.offsetwidth只讀屬性，不能賦值，這樣很好理解，因為offsetwidth返回值由多種成分構成，無法確定賦值如何在各種成分的劃分，這個值給border呢，還是給padding，或者給width。

三.是否能獲取隱藏元素的尺寸：

兩者在對待隱藏元素是有區別的，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  alert(str);
} 
</script> 
</head> 
<body> 
<div id="ant" style="width:200px;
                     height:50px; 
                     border:5px solid red; 
                     background-color:green; 
                     padding:3px;
                     display:none"></div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/06/000109ifih4t3t8z4rk3ec.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將div設定為display:none，這時offsetWidth實訓個返回值為0，style.width可以正常返回。

四.style.width返回寬度有條件限制：

並不是所有css的width的屬性值都可以被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"> 
#ant{ 
  width:200px; 
  height:50px; 
  border:5px solid red; 
  background-color:green; 
  padding:3px; 
} 
</style> 
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  odiv.innerHTML=str;
} 
</script> 
</head> 
<body> 
<div id="ant" style=""></div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/06/000135y7ggpoxx897soqf1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到offsetwidth可以正常返回值，但是style.width沒有返回。

但是的的確確使用css設定了元素的width屬性值，分析如下：

（1）.不要認為style.width屬性可以獲取任何形式設定的width屬性值。

（2）.它只能獲取通過元素style屬性設定width屬性值，或者通過style.width設定值的值。

其實從名稱也能夠猜測出原因，既然是style.xx，那麼肯定與style方式設定的CSS屬性相關聯。

特別說明：不要誤以為是與<style></style>內部樣式表相關聯，而是與style屬性方式相關聯。

相關文章