HTML - DOM Element clientHeight Property

Quiz

The HTML DOM Element clientHeight property is used to retrieve the inner height of an element, including padding but excluding margin, border, or scrollbar width. The returned height will be measured in pixels (px).

It is useful for dynamic layouts, scrolling behavior, and responsive design. It is a read-only property, which means it cannot be set or updated.

Syntax

Following is the syntax of the HTML DOM Element clientHeight property −

element.clientHeight;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a number(in pixels) that holds the viewable height of the element.

Example 1: Retrieving the Height of an Element

The following program demonstrates the usage of the HTML DOM Element clientHeight property by retrieving the height of the "div" element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientHeight</title>
<style>
   #box {
       width: 200px;
       height: 150px;
       border: 1px solid black;
       padding: 10px;
   }
</style>
</head>
<body>
<div id="box">
   <p>This box has some content.</p>
   <p>Its clientHeight is 
      <span id="heightDisplay"></span> pixels.
   </p>
</div>
<script>
   var box = document.getElementById("box");
   var clientHeight = box.clientHeight;
   document.getElementById("heightDisplay").textContent = clientHeight;
</script>
</body>
</html>

The above program displays the height of the "div" element as "170px".

Example 2: Height and Width of Paragraph (p) Element

Here is another example of the HTML DOM Element clientHeight property. We use this property to retrieve the height of the <p> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element clientHeight Property</title>
<style>
   #container {
       width: 300px;
       height: 200px;
       border: 1px solid black;
       padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientHeight Property</h3>
<p id="container">This is a container with some content.</p>
<p>Its dimensions will be displayed below.</p>
</div>
<div id="output">
   <h2>Container Dimensions:</h2>
   <ul>
      <li>Width: <span id="width"></span> pixels</li>
      <li>Height:<span id="height"></span> pixels</li>
   </ul>
</div>
<script>
   document.addEventListener("DOMContentLoaded", function() {
      var container = document.getElementById("container");
      document.getElementById("width").textContent = container.clientWidth;
      document.getElementById("height").textContent = container.clientHeight;
   });
</script>
</body>
</html>

Once the above program is executed, it displays the width and height of the "p" element.

Example 3: Adjust the Dynamic Layout

In the example below, we use the clientHeight property to toggle the visibility of the content by adjusting its height to zero and actual height −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element clientHeight</title>
<style>
   div{
       background-color: red;
       height: 30px;
       border: 1px solid black;
   }
</style>
</head>
<body>
<h3>HTML DOM Element clientHeight Property</h3>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<br><br>
<div id="content" ></div>
<script>
   function toggleVisibility() {
      var content = document.getElementById("content");
      if (content.clientHeight > 0) {
         content.style.height = "0"; 
      } else {
         content.style.height = "30px"; 
      }
   }
</script>
</body>
</html>

When the button clicks, it toggle the visibility of the content by adjusting it's height dynamically.

Supported Browsers

Property
clientHeight	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page