HTML DOM offsetHeight attribute

HTML DOM Element Object

offsetHeightA read-only property that returns the height of the element in integer form, including vertical padding and borders.

Generally, offsetHeight is the pixel measurement of the element's CSS height, including any borders, padding, and horizontal scrollbars (if any). It does not include the height of pseudo-elements such as::beforeor::after.

To understand this attribute, you must understandCSS Box Model.

UsingclientHeightandclientWidthThe attribute returns the visible height and width of the element, including padding, but not including borders, margins, and scrollbars (if any).

Syntax:

element.offsetHeight

var elem = document.querySelector("div");
var txt = "Height includes padding"　+border: ""　+　elem.offsetHeight　+　"px<br>";
txt　+= "Width includes padding"　+　border: ""　+　elem.offsetWidth　+　"px";

Browser Compatibility

All browsers fully support the offsetHeight property:

Technical Details

More Examples

This example demonstrates the difference between clientHeight and offsetHeight:

var elem = document.querySelector("div");
var txt = "Height includes padding: "　+　elem.clientHeight　+　"px<br>";
txt　+="Height includes padding"　+　border: ""　+　elem.offsetHeight　+　"px";

Related References

HTML DOM Reference:offsetWidth property

HTML DOM Reference:offsetLeft property

HTML DOM Reference:offsetTop property

HTML DOM Reference:offsetParent property

HTML DOM Element Object