How to get the div height using JavaScript ? Last Updated : 26 Apr, 2023 Comments Improve Suggest changes Like Article Like Report In this article, we will see How to get the div height using Javascript. We can do this by following ways: Using the offsetHeight property.Using the clientHeight property.Using getBoundingClientRect() Method. 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 ? Comment More infoAdvertise with us Next Article How to get the div height using JavaScript ? S sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to get the height of scroll bar using JavaScript ? To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont 3 min read How to get the height of a div using jQuery ? In this article, we will learn how to get the height of a div using jQuery. In jQuery, height method is used to get the height of any element in HTML. The height method sets and returns the height of the HTML elements. Method 1: The height() method returns the first matched element's height, But the 3 min read How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How to get the image size (height & width) using JavaScript? To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access 2 min read How to get the height of device screen in JavaScript ? Given an HTML document which is running on a device. The task is to find the height of the working screen device using JavaScript. Prerequisite - How to get the width of device screen in JavaScript ? Example 1: This example uses window.innerHeight property to get the height of the device screen. The 2 min read Like