JavaScript offsetHeight
offsetHeight屬性返回表示元素高度(不等同於CSS的height屬性)的數值,只讀屬性。
可以結合offsetWidth屬性一起學習。
需要特別說明兩點:
(1).返回值不帶單位,預設單位值是畫素(px)。
(2).此高度值與通過CSS為元素設定的height屬性值含義並不相同。
返回表示高度的數值由如下幾個要素構成:
(1).CSS規定的height屬性值。
(2).上內邊距(padding-top)與下內邊距(padding-bottom)。
(3).上邊框(border-top)與下邊框(boder-bottom)的厚度。
(4).包含水平滾動條的寬度。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let num = dom.offsetHeight
圖示如下:
紅色橫線框定之間的高度就是offsetHeight屬性的返回值。
需要注意的是,外邊距從來不在此屬性返回值範圍之內。
瀏覽器相容:
(1).IE瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).opera瀏覽器支援此屬性。
(5).火狐瀏覽器支援此屬性。
(6).safria瀏覽器支援此屬性。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; background:red; text-align:center; font-size:12px; overflow:auto; border:10px solid blue; padding-top:10px; padding-bottom:5px; } #ant{ width:500px; height:20px; background:#ccc; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); odiv.innerHTML=odiv.offsetHeight; } </script> </head> <body> <div id="box"></div> </body> </html>
上述程式碼會在div元素中顯示其offsetHeight值。
值的構成:135=height + border-top + border-bottom + padding-top + padding-bottom。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; background:red; text-align:center; font-size:12px; border:10px solid blue; padding-top:10px; overflow:auto; } #ant{ width:500px; height:20px; background:green; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); console.log(odiv.offsetHeight); } </script> </head> <body> <div id="box"> <div id="ant"></div> </div> </body> </html>
程式碼返回值截圖如下:
上述程式碼中,出現了水平滾動條,offsetHeight屬性返回值包括這個滾動條的高度。
在谷歌瀏覽器此高度為17px(也許以後會變,也許其他瀏覽器的值不同,以實測為準)。
注意:滾動條的高度包括在height高度之內(height超過滾動條高度時候)。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #box{ height:600px; width:800px; line-height:600px; color:white; background-color:blue; } .float{ width:800px; height:200px; background-color:red; float:left; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); odiv.innerHTML=document.body.offsetHeight; } </script> </head> <body> <div id="box"></div> <div class="float"></div> </body> </html>
前面介紹的都是普通HTML元素的offsetHeight屬性值。
對於body,offsetHeight返回值有一點特別,那麼就是浮動元素向下延展的高度不在計算範圍內。
比如上面的程式碼,底部的div是浮動的,那麼它的高度不在計算範圍之內。
大家可以將float屬性刪除,再看一下offsetHeight屬性的返回值。
相關文章
- javascript - 所有的檢視屬性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)JavaScriptclient
- element.clientHeight,offsetHeight,scrollHeightclient
- js 中style.height和offsetHeight比較JS
- offsetWidth和offsetHeight屬性用法簡單介紹
- display:none的元素無法獲取offsetWidth和offsetHeightNone
- 為什麼給offsetWidth和offsetHeight賦值無效賦值
- clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeightclient
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- This in JavaScriptJavaScript
- “This” is For JavaScriptJavaScript
- javascript thisJavaScript
- javascriptJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- 【轉向JavaScript系列】AST in Modern JavaScriptJavaScriptAST
- javascript,還是javascript的問題JavaScript
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- 【JavaScript】--JavaScript總結一覽無餘JavaScript
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念HTMLJavaScriptCSS
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript
- JavaScript normalize()JavaScriptORM
- JavaScript setDate()JavaScript
- JavaScript setMinutes()JavaScript
- JavaScript getDate()JavaScript
- JavaScript setHours()JavaScript
- JavaScript setUTCMinutes()JavaScript
- JavaScript setUTCHours()JavaScript
- JavaScript setUTCFullYear()JavaScript
- JavaScript setUTCMonth()JavaScript
- JavaScript setUTCDate()JavaScript
- JavaScript getUTCMinutes()JavaScript