JavaScript offsetWidth

admin發表於2019-01-08
JavaScript

offsetWidth 屬性可以返回指定元素的佈局寬度，只讀屬性。

佈局寬度所涵蓋的內容不僅包括 CSS width 寬度，還有其他內容。

屬性的返回值是一個數字（不帶任何單位，預設以畫素計）。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let num = dom.offsetWidth

佈局寬度圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201901/09/092858dmmwze8s3mhksyi5.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

紅線之間的尺寸，就是 offsetWidth 屬性的返回值，下面分析一下具體構成：

（1）.包含元素的寬度，這個寬度是 CSS  width 屬性規定的值。

（2）.包含左右內邊距的尺寸。

（3）.不包含左右外邊距的尺寸。

（4）.包含左側垂直滾動條的寬度（向內佔據寬度）。

上面四條總結會在後面通過程式碼例項進行驗證。

offsetWidth 屬性有幾點再強調一下：

（1）.返回值是數值，不帶任何單位，預設單位是畫素。

（2）.與CSS width 不同，雖然可能在數值在相等。

（3）.如果元素的CSS display 屬性值為none，返回值為0.

（4）.offsetWidth 返回值會對數值進行四捨五入取整，假如實際值是260.5，那麼返回261。

如果想要獲取獲取精確的值，推薦使用 getBoundingClientRect() 方法。

瀏覽器相容：

（1）.IE 瀏覽器支援此屬性。

（2）.edge 瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera 瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safari 瀏覽器支援此屬性。

程式碼例項：


[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style >
#ant{
  width :100px;
  line-height :50px;
  border :10px solid #ccc;
  padding-left :10px;
  padding-right :5px;
  text-align :center;
  font-size:12px;
  color:green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  oDiv.innerHTML=oDiv.offsetWidth;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>


將 offsetWidth 屬性值寫入div中，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/23/230508o3uu17grg8ahltah.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼分析如下：

（1）.屬性返回值是數值型別，預設以畫素計。

（2）.135 = width + border-left + border-right + padding-left + padding-right。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box {
  width :200px;
  height :100px;
  line-height :100px;
  text-align :center;
  border:10px solid #ccc;
  padding-left:10px;
  overflow:auto;
}
#ant{
  width :30px;
  height :200px;
  background:green;
}
</style>
<script>
window.onload = ()=> {
  let odiv = document.getElementById("box");
  console.log(odiv.offsetWidth);
}
</script>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

上述程式碼瀏覽器執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/23/230556nwuz08wtc75afwnn.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

offsetWidth 屬性值谷歌開發者工具控制檯截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/23/230608qi7lc0bg6z4li3z5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

230 = width（200）+ border-right（10） + border-left（10） + padding-left（10）。

程式碼分析如下：

（1）.內部 div 高度較大，父 div 元素出現滾動條。

（2）.滾動條有一定的寬度，當前在谷歌瀏覽器下寬度值為 17px，其他瀏覽器可能不同。

（3）.offsetWidth 包括滾動條的寬度，滾動條是向內佔據寬度。

注意：滾動條的寬度包括在 width 寬度之內（width 超過滾動條寬度時候）。

相關文章