HTML DOM clientHeight Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM clientHeight property is used to get the viewable height of an HTML element . This height includes padding but excludes any border, scrollbar and margins. It will only return the element’s height even if the content overflows from the element.

It can be calculated as −

CSS height+ CSS padding – border –scrollbar(horizontal) – margins

Syntax

Following is the syntax for clientHeight property −

element.clientHeight

Example

Let us look at an example for the HTML DOM clientHeight property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
   height: 250px;
   padding: 10px;
   margin: 15px;
   border: 2px solid blue;
   background-color: lightgreen;
   text-align:center;
}
</style>
</head>
<body>
<p>Click the below button to get the height of the div, including padding.</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function heightDiv() {
      var x = document.getElementById("styleDIV");
      var txt = "Height including padding = " + x.clientHeight ;
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the GET HEIGHT button −

In the above example −

We have created a div with id “styleDIV” and have a style applied to it using its id −

#styleDIV {
   height: 250px;
   padding: 10px;
   margin: 15px;
   border: 2px solid blue;
   background-color: lightgreen;
   text-align:center;
}
<div id="styleDIV">
<b>A sample div</b>
</div>

We have then created a button GET HEIGHT that will execute the heightDiv() method on click −

<button onclick="heightDiv()">GET HEIGHT</button>

The heightDiv() gets the <div> element using the getElementById() method and assigns it to variable x. Then using the clientHeight property on the <div> we get its height and after appending some text assigns it to variable txt. The text inside txt is then displayed inside the paragraph using the innerHTML property on the paragraph and assigning the txt variable to it −

function heightDiv() {
   var x = document.getElementById("styleDIV");
   var txt = "Height including padding = " + x.clientHeight ;
   document.getElementById("Sample").innerHTML = txt;
}
raja
Published on 07-Aug-2019 13:21:56
Advertisements