How do you get the rendered height of an element?

Question

How do you get the rendered height of an element?

Let\'s say you have a

element with some content inside. This content inside is going to st

Answer 1

If you are using jQuery already, your best bet is .outerHeight() or .height(), as has been stated.

Without jQuery, you can check the box-sizing in use and add up various paddings + borders + clientHeight, or you can use getComputedStyle:

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

h will now be a string like a "53.825px".

And I can't find the reference, but I think I heard getComputedStyle() can be expensive, so it's probably not something you want to call on each window.onscroll event (but then, neither is jQuery's height()).