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.
Description
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 |
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.