How to get the <div> height using JavaScript ?

Method 1: Using the offsetHeight property: The offsetHeight property of an element is a read-only property and 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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to get the div height
        using JavaScript ?
    </title>
  
    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            display:inline-block;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Get the height of <div>
        element using JavaScript
    </b>
      
    <p>
        Click on the button to get the height 
        of <div> 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>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    offsetHeight-before
  • After clicking the button:
    offsetHeight-after

Method 2: Using clientHeight property: The clientHeight property of an element is a read-only property and 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to get the div height
        using JavaScript ?
    </title>
  
    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            display:inline-block;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Get the height of <div>
        element using JavaScript
    </b>
      
    <p>
        Click on the button to get the height 
        of <div> 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.clientHeight;
   
            document.querySelector(".output").textContent
                    = elemHeight + "px";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    clientHeight-before
  • After clicking the button:
    clientHeight-after

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to get the div height
        using JavaScript ?
    </title>
  
    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            display:inline-block;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Get the height of <div>
        element using JavaScript
    </b>
      
    <p>
        Click on the button to get the height 
        of <div> 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");
   
            elemRect = divElement.getBoundingClientRect();
        
            elemHeight = elemRect.height;
   
            document.querySelector(".output").textContent
                    = elemHeight + "px";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking the button:
    getClientRect-before
  • After clicking the button:
    getClientRect-after


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.