How's jquery able to get the height of a hidden div?

Question

Please look at the following link.

HTML:

<div id="test">
    <div id="test1">test 1</div>
    <div id="test2">test 2</div>
</div>

Javascript:

$(document).ready(function(){
    $("#test").hide();
    alert($("#test").height());
    alert(document.getElementById("test").getBoundingClientRect().height);
});

How is jquery alone able to get the height of the hidden div? Thanks!

You're already use JQuery, but why still using `document.getElementById("test")`? Why not using `$('#test');`? — Iswanto San, Mar 14 '13 at 07:16
http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery — Jaya Vishwakarma, Mar 14 '13 at 07:18
It is not a problem I am facing. I just want to understand how jquery is able to get the height. — Gautham Renganathan, Mar 14 '13 at 07:20
why would you think storing the height before hiding the div, would be any tough for jquery?? — loxxy, Mar 14 '13 at 07:24

score 1 · Answer 1 · answered Mar 14 '13 at 07:15

1

Use this for your script:

$(document).ready(function(){
    var x = document.getElementById("test").getBoundingClientRect().height;
    $("#test").hide();
    alert($("#test").height());
    alert(x);
});

answered Mar 14 '13 at 07:15

Iswanto San

18,263
13
58
79

elclanrs · Accepted Answer · 2013-03-14T07:22:06.683

In plain JavaScript you can do something like this and it should work:

// $("#test").hide();
// alert($("#test").height());

var el = document.getElementById("test");
el.style.position = 'absolute';
el.style.visibility = 'hidden';

alert(el.offsetHeight); // 40

jQuery is probably doing the magic for you in some other way. It's not reliable to get dimensions of hidden objects with display: none.

Edit: Here's the jQuery code that handles dimensions. You'll have to connect some dots but it doesn't seem very complicated.

Kautil · Answer 3 · 2013-03-14T08:54:32.483

1

You can get height of div using,

$('#test1').height();
$('#test2').height();

height() function computes height of given element.

edited Mar 14 '13 at 08:54

answered Mar 14 '13 at 07:17

Kautil

1,321
9
13

score 1 · Answer 4 · answered Oct 18 '15 at 04:43

I didn't get much from the other answers and wanted to know the same thing and found the relevant lines in the jQuery 3.0.0-pre source.

These properties get temporarily added to the element using this swap function if getClientRects() or getBoundingClientRect() don't return anything useful:

{ position: "absolute", visibility: "hidden", display: "block" }

Then it calls val = elem.getBoundingClientRect()[ name ]; to get the width (line 127 - 3.0.0-pre).

score 0 · Answer 5 · answered Mar 14 '13 at 07:19

Notice the difference : http://jsfiddle.net/YJMrE/5/

Jquery hides it, so it knows what the hidden element's height was before hiding.

While javascript simply returns the current height.

$(document).ready(function(){        
    alert(document.getElementById("test").getBoundingClientRect().height); // 40
    $("#test").hide();    
    alert(document.getElementById("test").getBoundingClientRect().height); // 0
});

How's jquery able to get the height of a hidden div?

5 Answers5