HTML DOM Element offsetHeight Property

Definition and Usage

offsetHeight The property returns the visible height of the element (in pixels), including padding, border, and scrollbar, but not including margin.

offsetHeight The property is read-only.

See also:CSS Box Model Tutorial

offsetParent

All block-level elements report offsets relative to the offset parent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Offset parent refers to the nearest ancestor with a non-static position.

If there is no offset parent, the offset is relative to the main body of the document.

See also:

offsetWidth property

offsetParent property

offsetTop property

offsetLeft property

clientTop property

clientLeft property

clientWidth property

clientHeight property

Example

Example 1

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

Example 2

The difference between clientHeight/clientWidth and offsetHeight/offsetWidth

With 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

Without 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

Syntax

element.offsetHeight

Return value

Type Description
Number The visible height of the element (in pixels), including padding, border, and scrollbar.

Browser support

All browsers support element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support