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:

• “offsetHeight” Property.
• “clientHeight” Property.
• “scrollHeight” Property.
• “jQuery” Approach.

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

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:

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:

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

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:

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:

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

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:

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:

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:

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:

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.