HTML DOM offsetHeight Property
Example
Get the height and width of a <div> element, including padding and border:
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";
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.
The reason why the "viewable" word is specified, is because if the element's content is taller than the actual height of the element, this property will only return the height that is visible (See "More Examples").
Note: To understand this property, you must understand 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 viewable height and width of an element, only including the padding.
Tip: To add scrollbars to an element, use the CSS overflow property.
This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetHeight
Technical Details
| Return Value: | A Number, representing the viewable height of an element in pixels, including padding, border and scrollbar |
|---|
More Examples
Example
This example demonstrates the difference between clientHeight/clientWidth and 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";
Try it Yourself »
Example
This example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth, when we add a scrollbar to the element:
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";
Try it Yourself »
