Easy Tutorial
❮ Prop Search Form Prop Source Media ❯

HTML DOM offsetHeight Property

Element Object

Example

Get the height of a div element, including padding and border:


Definition and Usage

The offsetHeight property is a read-only property that returns the height of the element in pixels, including padding and border, but not margin. It returns an integer value in pixels.

Typically, an element's offsetHeight is a measurement of the element's CSS height, including the element's border, padding, and the vertical scrollbar (if present and rendered), but not including the heights of pseudo-elements like :before or :after.

For the document's body object, it includes the linear sum of the CSS height of the replaced elements. The height of the content that extends downward for floating elements is ignored.

If the element is hidden (for example, the element or one of its ancestors has style.display set to none), it returns 0.

Note: To understand this property, refer to the CSS Box Model.

Tip: This property is often used together with the offsetWidth property.

Tip: Use the clientHeight and clientWidth properties to return the visible height and width of an element, including padding.

Tip: To add scrollbars to an element, use the overflow property.

This is a read-only property.


Browser Support

Property Chrome Edge Firefox Safari Opera
offsetHeight Yes Yes Yes Yes Yes

Syntax

element.offsetHeight

Technical Details

| Return Value: | Returns an integer representing the height of the element in pixels. | | --- | --- |


More Examples

Example

The following example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth properties:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding and border: " + elmnt.offsetWidth + "px";

Example

The following example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth properties after adding scrollbars to the element:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "<b>div style information:</b><br>";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding, border, and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding, border, and scrollbar: " + elmnt.offsetWidth + "px";

Element Object

❮ Prop Search Form Prop Source Media ❯