JavaScript

Get Height of the Div Element in JavaScript

Getting the height of the div element in JavaScript is very helpful in applying a proper layout to the document object model (DOM) which makes a website stand out and results in attracting the user’s attention. For instance, creating a particular web page or website, the added features and functionalities require proper formatting to be accumulated without altering the document design.

This write-up will demonstrate the approaches to get the height of the div element in JavaScript.

How to Get Height of the Div Element in JavaScript?

The following approaches can be utilized to get the height of the div element in JavaScript:

Approach 1: Get Height of the Div Element in JavaScript Using the offsetHeight Property

The “offsetHeight” property returns the outer height of an element including the padding as well as the borders. This property can be implemented to compute the height of the accessed heading upon the button click.

Syntax

element.offsetHeight

Here, “element” corresponds to the element to be computed for the height.

Example

In the below example:

  • Specify the following div with an assigned class.
  • Also, include the specified heading within to be calculated for the “height”.
  • Now, create a button with an “onclick” event invoking the function divHeight().
  • After that, allocate the headings in order to display the computed height:
<center>

<div class= "element">

<h2 style= "background-color: aliceblue;">This is Linuxhint Website</h2></div>

<button onclick= "divHeight()">Get the Height of the Div Element</button>

<h3>The Height of the Div Element is:</h3>

<h3 id= "head"></h3>

</center>

In the further js code:

  • In the below given js code, declare a function named “divHeight()”.
  • In its definition, access the assigned div by its class using the “document.querySelector()” method and the heading for the computed height using the “document.getElementById()” method.
  • After that, apply the “offsetHeight” property to compute the outer height of the specified heading and display it in the allocated heading discussed before using the “innerText” property:
function divHeight(){

let getDiv = document.querySelector('.element');

let get= document.getElementById("head")

let height = getDiv.offsetHeight;

get.innerText= +height

}

Output

In the above output, it is evident that the height is computed.

Approach 2: Get Height of the Div Element in JavaScript Using the clientHeight Property

The “clientHeight” property, on the other hand, calculates the element’s inner height including the padding but excluding the borders. This property can be similarly applied to the included image within the div element.

Syntax

element.clientHeight

Here, likewise “element” corresponds to the element to be computed for the height.

Example

  • Repeat the above-discussed approaches for specifying the “div” class.
  • Here, specify the following image to be computed for the “height”.
  • Likewise, allocate a heading for the computed height and create a button with an attached event “onclick” as discussed:
<div class= "element">

<img src= "template3.PNG"></div>

<h3>The Height of Div Element is:</h3>

<h3 id= "head"></h3>

<button onclick= "divHeight()">Get the Height of the Div Element</button>

In the below given js function:

  • Define a function named “divHeight()”.
  • Repeat the above-discussed approaches for accessing the “div” element and the included heading.
  • After that, apply the “clientHeight” property to calculate the outer height of the image specified in the above code and return it as a heading:
function divHeight(){

let box = document.querySelector('.element');

let get= document.getElementById('head')

let height = box.clientHeight;

get.innerText= +height

}

Output

From the above output, it can be observed that the required functionality is achieved.

Approach 3: Get Height of the Div Element in JavaScript Using the scrollHeight Property

The “scrollHeight” property is identical to the “clientHeight” property as it returns the height of an element with the padding, but not the borders. This property can be applied to the created table to calculate its height.

Syntax

element.scrollHeight

In the given syntax, “element” similarly corresponds to the element to be computed for the height.

Example

  • Firstly, include the “div” element with the specified “class” and an attached “onmouseover” event redirecting to the function divHeight().
  • Next, create a table with the specified heading and data values.
  • Similarly, revive the discussed method for allocating a heading to display the computed height in it:
<div class= "element" onmouseover= "divHeight()">

<table border= "1px solid black" cellpadding= "10px">

<tr>

<th>ID.</th>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>1</td>

<td>Harry</td>

<td>18</td>

</tr>

<tr>

<td>2</td>

<td>David</td>

<td>46</td>

</tr>

</table></div><br>

<h3 id= "head"></h3>

In the following js code, follow the stated steps:

  • Define the function named “divHeight()”.
  • Access the “div” element.
  • Finally, apply the “scrollHeight” property to return the height of the created table:
function divHeight(){

let getDiv = document.querySelector('.element');

let height = getDiv.scrollHeight;

console.log("The Height of the Div Element is: ", +height)

}

Output

Approach 4: Get Height of the Div Element in JavaScript Using the jQuery Approach

This approach returns the height of the heading as well as the paragraph within the div element with the help of a jQuery library.

Example

  • In the below demonstration, include the specified jQuery library in order to apply its methods.
  • Next, specify the “div” and contain the following heading and paragraph in it to be calculated for the height.
  • After that, revive the discussed methods for creating a button and assigning a heading for the resultant height to be displayed in it:
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id= "element" style= "border: 2px solid;">

<h2>JavaScript</h2>

JavaScript is a very effective programming language which can be integrated with HTML as well to perform various added functionalities in designing a particular web page or the website. This results in attracting the users and enhancing the overall document design.

</div><br>

<button type= "button">Get the Height of the Div Element</button>

<h3 id= "result"></h3>

In the below-given code:

  • In the jQuery code, apply the “ready()” method in order to execute the further code as soon as the Document Object Model(DOM) is loaded.
  • Now, apply the “click()” method which will execute the specified function upon the button click
  • Lastly, upon the button click, access the “div” element, and apply the “height()” method to it thereby returning its height:
$(document)

.ready(function() {

$("button").click(function(){

var divHeight = $("#element").height();

$("#result").html("The Height of the Div Element is: " + divHeight);

});

});

Output

This write-up compiled the approaches to get the height of the div element in JavaScript.

Conclusion

The “offsetHeight” property, the “clientHeight” property, the “scrollHeight” property, or the “jQuery” approach can be utilized to get the height of the div element in JavaScript. The offsetHeight property can be applied to compute the outer height of the accessed heading upon the button click. The clientHeight property and the scrollHeight property can be opted for computing the inner height of the element. The jQuery approach can also be implemented by including its library and utilizing its methods for performing the required calculations. This article demonstrated the approaches that can be applied to get the height of the div element in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.