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.
Let’s try to find the height of a div
element below.
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.
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).