Open In App
Related Articles

How to get the div height using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will see How to get the div height using Javascript. We can do this by following ways:

Method 1: Using the offsetHeight property: The offsetHeight property of an element is a read-only property and is used to return the height of an element in pixels. It includes any borders or padding of the element. This property can be used to find the height of the <div> element. 

Syntax:

divElement.offsetHeight

Example: In this example, we will use the offsetHeight property.

html

<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: green;
        display: inline-block;
    }
</style>
<h1 style="color: green">
    GeeksforGeeks
</h1>
 
<b>
    Get the height of
    <div>
        element using JavaScript
    </div>
</b>
 
<p>
    Click on the button to get the height
    of
    element
</p>
 
<div class="box"></div>
 
<p>
    Height of the div:
    <span class="output"></span>
</p>
 
<button onclick="getHeight()">
    Get Height
</button>
 
<script type="text/javascript">
    function getHeight() {
 
        divElement = document.querySelector(".box");
 
        elemHeight = divElement.offsetHeight;
 
        document.querySelector(".output").textContent
            = elemHeight + "px";
    }
</script>

                    

Output:

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20230120173052/gfg.gif" alt="How to get the
height using JavaScript ?” srcset=”https://media.geeksforgeeks.org/wp-content/uploads/20230120173052/gfg.gif 276w, ” sizes=”100vw” width=”276″>
How to get the <div> height using JavaScript ?

Method 2: Using clientHeight property: The clientHeight property of an element is a read-only property and is used to return the height of an element in pixels. It includes only the padding applied to the element and excludes the borders, margins, or horizontal scrollbars. This property can be used to find the height of the div element.

 Syntax:

divElement.clientHeight

Example: In this example, we will use the clientHeight property.

html

<!-- HTML elements to iterate -->
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: green;
        display: inline-block;
    }
</style>
<h1 style="color: green">
    GeeksforGeeks
</h1>
 
<b>
    Get the height of
    <div>
        element using JavaScript
    </div>
</b>
 
<p>
    Click on the button to get the height
    of
<div>
    element
</div>
</p>
 
<div class="box"></div>
 
<p>
    Height of the div:
    <span class="output"></span>
</p>
 
<button onclick="getHeight()">
    Get Height
</button>
 
<script type="text/javascript">
    function getHeight() {
 
        divElement = document.querySelector(".box");
 
        elemHeight = divElement.clientHeight;
 
        document.querySelector(".output").textContent
            = elemHeight + "px";
    }
</script>

                    

Output:

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20230120173052/gfg.gif" alt="How to get the
height using JavaScript ?” srcset=”https://media.geeksforgeeks.org/wp-content/uploads/20230120173052/gfg.gif 276w, ” sizes=”100vw” width=”276″>
How to get the <div> height using JavaScript ?

Method 3: Using getBoundingClientRect() Method: The getBoundingClientRect() method is used to return a DOMRect object which contains 8 properties related to the dimensions of the bounding rectangle. One of these properties of the DOMRect object is the height property. It returns the height of the DOMRect object. This property can be used to find the height of the div element. 

Syntax:

elemRect = divElement.getBoundingClientRect();
elemHeight = elemRect.height;

Example: In this example, we will see the use of getBoundingClientRect() Method

html

<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: green;
        display:inline-block;
    }
</style>
<h1 style="color: green">
    GeeksforGeeks
</h1>
 
<b>
    Get the height of
    <div>
        element using JavaScript
    </div>
</b>
 
<p>
    Click on the button to get the height
    of
    <div>
        element
    </div>
</p>
 
<div class="box"></div>
 
<p>
    Height of the div:
    <span class="output"></span>
</p>
 
<button onclick="getHeight()">
    Get Height
</button>
 
<script type="text/javascript">
    function getHeight() {
         
        divElement = document.querySelector(".box");
     
        elemRect = divElement.getBoundingClientRect();
     
        elemHeight = elemRect.height;
     
        document.querySelector(".output").textContent
                = elemHeight + "px";
    }
</script>

                    

Output:

<img src="https://media.geeksforgeeks.org/wp-content/uploads/20230120173052/gfg.gif" alt="How to get the
height using JavaScript ?” srcset=”https://media.geeksforgeeks.org/wp-content/uploads/20230120173052/gfg.gif 276w, ” sizes=”100vw” width=”276″>
How to get the <div> height using JavaScript ?


Last Updated : 26 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads