例
得到的高度和寬度<div>元素,包括填充和邊框:
var elmnt = document.getElementById("myDIV");
var txt =
"Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt +=
"Width with padding and border: " + elmnt.offsetWidth + "px";
TXT的結果將是:
Height with padding and border: 280px
Width with padding and border: 430px
試一試» 更多"Try it Yourself"下面的例子。
定義和用法
該物業的offsetHeight返回元素的以像素為單位,包括填充,邊框和滾動條可視的高度,而不是利潤率。
為什麼原因"viewable"指定字,是因為如果該元素的含量比元件的實際高度高,此屬性將只返回高度是可見的(See "More Examples")
注意:要了解這個屬性,你必須了解CSS盒模型 。
提示:該屬性通常與一起使用offsetWidth屬性。
提示:使用clientHeight和clientWidth屬性返回一個元素的可視高度和寬度,僅包括填充。
提示:要滾動條添加到一個元素,使用CSS 溢出財產。
此屬性為只讀。
瀏覽器支持
屬性 | |||||
---|---|---|---|---|---|
offsetHeight | 是 | 是 | 是 | 是 | 是 |
句法
element .offsetHeight
技術細節
返回值: | 一個數字,表示在像素的元件的可視高度,包括填充,邊界和滾動條 |
---|
更多示例
例
該實施例證明clientHeight / clientWidth和的offsetHeight / offsetWidth之間的差:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt +=
"Height with padding: " + elmnt.clientHeight + "px<br>";
txt +=
"Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt +=
"Width with padding and border: " + elmnt.offsetWidth + "px";
TXT的結果將是:
Height with padding: 270px
Height with padding and border:
280px
Width with padding: 420px
Width with padding and
border: 430px
試一試» 例
這個例子演示了clientHeight / clientWidth和的offsetHeight / offsetWidth之間的區別,當我們添加一個滾動條的元素:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt +=
"Height with padding: " + elmnt.clientHeight + "px<br>";
txt +=
"Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt +=
"Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
TXT的結果將是:
Height with padding: 249px
Height with padding, border and
scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
試一試»