In this section, we will learn what the Element offsetHeight property is and how to use it in JavaScript.

What is Element offsetHeight Property in JavaScript?

The JavaScript Element offsetHeight property is used to get the “viewable” height of an element in pixels.

This height included size of the content and padding, horizontal-scroll-bar and the borders if they are present.

Notes:

• We say “viewable” height of an element. That means if the target element has a fixed height but there was an overflow of content, then the height would be only the value set for the `height` property (which is the visible height of the element) + the size of the padding and border.
• Check the CSS Box Model section if you’re not familiar with it.

JavaScript offsetHeight Property Syntax:

element.offsetHeight;

JavaScript offsetHeight Property Input Value

The offsetHeight property is read-only and we can’t assign a value to it.

JavaScript offsetHeight Property Return Value

The return value of this property, as mentioned before, is the viewable height of an element.

Example: using offsetHeight Property in JavaScript

See the Pen using offsetHeight Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.

How does Element offsetHeight property work in JavaScript?

Here the value of the height property is set to 100px, the padding to 20px and the border to 10px.

So this is how we got the value 160px when we called the offsetHeight property:

100px + 20px + 20px + 10px + 10px = 160px;