CSS / JavaScript - How do you get the rendered height of an element?

Question

How do you get the rendered height of an element?

Lets 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.

FINAL THOUGHTS: In the end I went with jQuery height()
Please take the time to read all answers and comments

Answer 1

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.

Answer 2

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!

Answer 3

Have you set the height in the css specifically? If you haven't you need to use offsetHeight; rather than height

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

Answer 4

offsetHeight, usually.

if you need to calculate something but not show it, set the element to visibility:hidden and position:absolute, add it to the DOM tree, get the offsetHeight, and remove it. (That's what the prototype library does behind the lines last time I checked).

Answer 5

With MooTools:

$('someDiv').getSize().y

Answer 6

Definitely use

$('#someDiv').height()   // to read it

or

$('#someDiv').height(newHeight)  // to set it

I'm posting this as an additional answer because theres a couple important things I just learnt.

I almost fell into the trap just now of using offsetHeight. This is what happened :

• I used the good old trick of using a debugger to 'watch' what properties my element has
• I saw which one has a value around the value I was expecting
• It was offsetHeight - so I used that.
• Then i realized it didnt work with a hidden DIV
• I tried hiding after calculating maxHeight but that looked clumsy - got in a mess.
• I did a search - discovered jQuery.height() - and used it
• found out height() works even on hidden elements
• just for fun I checked the jQuery implementation of height/width

Here's just a portion of it :

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)

Yup it looks at BOTH scroll and offset. If that fails it looks even further, taking into account browser and css compatibility issues. In other words STUFF I DONT CARE ABOUT - or want to.

But I dont have to. Thanks jQuery!

Moral of the story : if jQuery has a method for something its probably for a good reason, likely related to compatibilty.

If you haven't read through the jQuery list of methods recently I suggest you take a look.