jQuery get the rendered height of an element?

Question

How do you get the rendered height of an element?

Let's say you have a <div> element with some content inside. This content inside is going to stretch the height of the <div>. How do you get the "rendered" height when you haven't explicitly set the height. Obviously, I tried:

var h = document.getElementById('someDiv').style.height;

Is there a trick for doing this? I am using jQuery if that helps.

Solution 1

It should just be

$('#someDiv').height();

with jQuery. This retrieves the height of the first item in the wrapped set as a number.

Trying to use

.style.height

only works if you have set the property in the first place. Not very useful!

Solution 2

Try one of:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight includes the height and vertical padding.

offsetHeight includes the height, vertical padding, and vertical borders.

scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.

Solution 3

NON JQUERY since there were a bunch of links using elem.style.height in the top of these answers...

INNER HEIGHT:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

OUTER HEIGHT:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

Or one of my favorite references: http://youmightnotneedjquery.com/

Solution 4

I use this to get the height of an element (returns float):

document.getElementById('someDiv').getBoundingClientRect().height

It also works when you use the virtual DOM. I use it in Vue like this:

this.$refs['some-ref'].getBoundingClientRect().height

For a Vue component:

this.$refs['some-ref'].$el.getBoundingClientRect().height

Solution 5

You can use .outerHeight() for this purpose.

It will give you full rendered height of the element. Also, you don't need to set any css-height of the element. For precaution you can keep its height auto so it can be rendered as per content's height.

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

For a clear view of these function you can go for jQuery's site or a detailed post here.

it will clear the difference between .height() / innerHeight() / outerHeight()

View more solutions