How to get the <div> height using JavaScript ? - GeeksforGeeks

07 Nov, 2019
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:
<!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>
Output:
Before clicking the button:
After clicking the button:
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:
<!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>
Output:
Before clicking the button:
After clicking the button:
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:
<!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>
Output:
Before clicking the button:
After clicking the button:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?