Get height of a div element with JavaScript/jQuery

This post will discuss how to get the height of a div element in JavaScript and jQuery.

1. Using JavaScript

In JavaScript, you can use the clientHeight property, which returns an element’s height, including its vertical padding. Basically, it returns the actual space used by the displayed content.

For example, the following code returns 120, which is equal to the original height plus the vertical padding.

Edit in JSFiddle

 
Alternatively, if you need border and scrollbars as well, consider using the offsetHeight property. It returns the height of an element, including vertical padding and borders. In other words, it returns the total amount of space an element occupies.

For example, the following code will return 122 value which is equal to the original height plus the vertical padding plus the border.

Edit in JSFiddle

 
You can also use the height property to get the height of an element. This only works when the container has a height attribute set. Note, this returns a value with units intact.

Edit in JSFiddle

 
Finally, you can also use the getBoundingClientRect() method. It returns a DOMRect object which has the height property, whose value includes the padding and border.

For example, the following code will return 122 value which is equal to the original height plus the vertical padding plus the border.

Edit in JSFiddle

2. Using jQuery

jQuery has the .height() method, which returns an element’s content height. For example, the following code returns 100, which is equal to the original height of div.

Edit in JSFiddle

 
Note, the .height() method returns a unit-less value. If you need height with units intact like 100px, use .css("height") instead.

Edit in JSFiddle

 
Alternatively, if you need to include padding and border information, and optionally the margin, consider using the .outerHeight() method.

Edit in JSFiddle

That’s all about getting the height of a div element in JavaScript and jQuery.