JavaScript offsetHeight

admin發表於2018-11-13
JavaScript

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

佈局高度所涵蓋的內容不僅包括 CSS height 定義的高度，還有其他內容。

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

語法結構：

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

佈局高度圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/08/193504t5jfclc5e9l6lbnn.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

紅色橫線框定之間是 offsetHeight 屬性返回值，下面分析一下具體構成：

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

（2）.包含上下內邊距的尺寸。

（3）.不包含上下外邊距的尺寸。

（4）.包含底部水平滾動條的高度（向內佔據尺寸）。

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

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

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

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

（4）.offsetHeight 返回值會對數值進行四捨五入取整，假如實際值是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 type="text/css">
#ant {
  width :100px;
  height :50px;
  line-height :50px;
  text-align :center;
  border :10px solid #ccc;
  padding-top :10px;
  padding-bottom :5px;
  font-size :12px;
  color :green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  oDiv.innerHTML=oDiv.offsetHeight;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/24/100721p0eeaal0a0c46msw.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼分析如下：

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

（2）.35 = height + border-top + border-bottom + padding-top + padding-bottom。

[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;
  border:10px solid #ccc;
  padding-top :10px;
  text-align :center;
  font-size :12px;
  overflow :auto;
}
#ant {
  width :500px;
  height :20px;
  background :green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("box");
  console.log(oDiv.offsetHeight);
}
</script>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202003/24/101600cpleeebb3ggm88oe.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/13/173629o3kw5rp8hhrd9ksd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

出現水平滾動條，offsetHeight 屬性返回值包括這個滾動條的高度。

谷歌瀏覽器此高度為 17px（也許以後會變，也許其他瀏覽器的值不同，以實測為準）。

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

相關文章