HTML DOM Element offsetHeight
Example
Display the height and width of "myDIV", including padding and border:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Try it Yourself »
More 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 offsetHeight property id read-only.
Tutorial:
The offsetParent
All block-level elements report offsets relative to the offset parent:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
The offset parent is the nearest ancestor that has a position other than static.
If no offset parent exists, the offset is relative to the document body.
See Also:
Syntax
element.offsetHeight
Return Value
| Type | Description |
| Number | The viewable height of the element (in pixels) including padding, border and scrollbar. |
The difference between clientHeight/clientWidth and offsetHeight/offsetWidth
Without a scrollbar:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Try it Yourself »
With a scrollbar:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Try it Yourself »
Browser Support
element.offsetHeight is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
