What is the DOM property "clientHeight"?

Overview

In this shot, we will learn about the HTML DOM property clientHeight that returns the height of an element.

The element’s height includes the height that we assigned to it as a CSS property as well as padding, but it does not include the margin, border, or scrollbar.

Code

Let’s try to find the height of a div element below.

Explanation

• In lines 5-8, we declare CSS properties for ID elem, where we define the properties background-color, padding, and height.

• In line 14, we use the <p> tag to display text.

• In line 16, we write a button tag which has a function change() bound with an onclick event.

• In line 18, we declare a div element with the ID elem, which we will use to get the element object.

• In lines 22-23, in script tag, we define a function change(), which will be called when we click on the “Click me” button that gets generated when we run the code.

• In line 24, we use document.getElementById() to get the desired element of DOM.

• In line 25, we apply clientHeight which will return the height of the element.

• Line 26 prints the value returned by clientHeight on the console.

Output

We successfully obtain the height of the div element. The console prints the total height 70px, that is returned after including the height of div (50px) as well as the top and bottom padding (10px + 10px = 20px).