jQuery get the rendered height of an element?

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.

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!

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

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.

I think the best way to do this in 2020 is to use vanilla js and getBoundingClientRect().height;

Here's an example

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 
</div>

On top of getting height this way, we also have access to a bunch of other stuff about the div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? </div>

document.querySelector('.project_list_div').offsetHeight;

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 scenes last time I checked).

With MooTools:

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

If i understood your question correctly, then maybe something like this would help:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}

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;