How do you get the rendered height of an element?

How do you get the rendered height of an element?

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 stretch the height of the

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

Solutions/Answers:

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:

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()

Solution 5:

style = window.getComputedStyle(your_element);

then simply: style.height

Solution 6:

I use this:

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