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

What is Element clientHeight Property in JavaScript?

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

This height is including the content and padding. But not border, margin, or horizontal scroll-bar if 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.

Element clientHeight Property Syntax:

element.clientHeight;

Element clientHeight Property Input Value

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

Element clientHeight Property Return Value

The return value of this property, as mentioned at the beginning of this section, is the viewable height of the target element.

Example: using Element clientHeight Property in JavaScript

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

How does Element clientHeight property work in JavaScript?

In this example, the height of the <ol> element is set to 200px and its padding to 20px.

So this is how we got the value 240px as a result of calling the clientHeight property:

200px + 20px + 20px = 240px;