HTML DOM offsetHeight Property
Element ObjectExample
Get the height of a div element, including padding and border:
Try it Yourself »
Definition and Usage
The offsetHeight property is a read-only property that returns the pixel height of the element, including padding and border, excluding margin, as an integer in pixels px.
Generally, an element's offsetHeight is a measure of the element's CSS height, including the element's border, padding, and horizontal scrollbar (if present and rendered), but excluding:beforeor:afterthe height of pseudo-elements, etc.
For the document's body object, it includes the linear total content height instead of the element's CSS height. The height of content extending downward from floating elements is ignored.
If the element is hidden (for example, the element or one of its ancestor elements'style.displayis set tonone), returns 0.
Note:To understand this property, refer toCSS Box Model。
Tip:This property is usually used together with theoffsetWidthproperty.
Tip:Use the clientHeightandclientWidthproperty to return the visible height and width of the element, including only padding.
Tip:To add a scrollbar to the element, you can use theoverflowproperty.
This is a read-only property.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetHeight
Technical Details
| Return Value: | Returns an integer representing the pixel height of the element. |
|---|
More Examples
Example
The following example demonstrates the difference between the clientHeight/clientWidth and offsetHeight/offsetWidth properties:
Try it Yourself »
Example
The following example demonstrates the difference between the clientHeight/clientWidth and offsetHeight/offsetWidth properties after a scrollbar is added to the element:
Try it Yourself »
Other Extensions