JavaScript中很多屬性的功能比較類似,當然它們之間是有區別的,否則就是設計錯誤了。
如果是有經驗的程序員,從兩者名稱大體可以猜測到區別,當然這需要一個積累過程。
下面詳細介紹一下標題中兩屬性的區別,期望能夠達到舉一反三的效果。
offsetwidth與style.width都可以返回表示元素"寬度"的數據。
非常相似,但是區別也是十分明顯,下面通過代碼實例做一下介紹。
關于兩個屬性的基本用法參閱如下兩篇文章:
一.寬度所涵蓋內容的區別:
雖然兩者都可以返回表示元素寬度的一個值,但是所涵蓋的內容并不相同。
代碼實例如下:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.vxisgr.tw/" /> 
<title>offsetwidth style.width</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>
代碼分析如下:
(1).offsetwidth屬性返回值涵蓋元素的width+border+padding。
(2).style.width屬性返回值僅包含元素的width屬性值。
(3).offsetwidth屬性返回值是數字,不帶單位,style.width返回值帶有單位。
二.兩個屬性的可讀寫性:
下面不再使用代碼演示,直接給出結論。
(1).style.width屬性是可讀寫的。
(2).offsetwidth只讀屬性,不能賦值,這樣很好理解,因為offsetwidth返回值由多種成分構成,無法確定賦值如何在各種成分的劃分,這個值給border呢,還是給padding,或者給width。
三.是否能獲取隱藏元素的尺寸:
兩者在對待隱藏元素是有區別的,代碼實例如下:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.vxisgr.tw/" /> 
<title>offsetwidth與style.width區別</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>
將div設置為display:none,這時offsetWidth實訓個返回值為0,style.width可以正常返回。
四.style.width返回寬度有條件限制:
并不是所有css的width的屬性值都可以被style.width屬性返回。
代碼實例如下:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.vxisgr.tw/" /> 
<title>offsetwidth與style.width區別</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>
可以看到offsetwidth可以正常返回值,但是style.width沒有返回。
但是的的確確使用css設置了元素的width屬性值,分析如下:
(1).不要認為style.width屬性可以獲取任何形式設置的width屬性值。
(2).它只能獲取通過元素style屬性設置width屬性值,或者通過style.width設置值的值。
其實從名稱也能夠猜測出原因,既然是style.xx,那么肯定與style方式設置的CSS屬性相關聯。
特別說明:不要誤以為是與<style></style>內部樣式表相關聯,而是與style屬性方式相關聯。

代碼描述:offsetwidth style.width,offsetwidth與style.width區別



64 85



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 jshtml對象 javascripthtml對象
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表