How can I get the height of an element that has a parent that has a mapping: none?

Question

How can I get the height of an element that has a parent with display: none ?

Example here: jsfiddle.net

thanks

Lucas

Answer 1

Temporarily show() The element to get the height of the child seems to be working fine.

HTML:

 <div id="target" style="display:none;"> <!-- Add a background color to see if it noticeable --> <div style="height:123px; background:#000;"></div> </div> 

JS:

 // Show the hidden parent of the element we want the height of $("#target").show(0, function(){ // Find and grab the height of the element we want the_height = $(this).find("div").height(); // Hide parent and display child height after it }).hide().after(the_height); 

Demo: jsfiddle.net/Gts6A/72

Answer 2

You can do this, or you can use the hack from this question .

 $("#target").parent().show(); var h = $("#target").height(); $("#target").parent().hide(); alert(h); 

See fiddle .

Answer 3

it very difficult(in other word you can't) to get the height of the hidden element ... because dom doesn't consider hidden elements while rendering the page .

Answer 4

Hidden elements have an undefined width and height, so they cannot be obtained.

Answer 5

This is a little klunky, but before you can measure it, you must have an object.

 var $target = $("#target"); $target[0].parentNode.runtimeStyle.display = "block"; var height = $target.height(); $target[0].parentNode.runtimeStyle.display = "none"; alert(height); 

Answer 6

Either you must display the div, or you cannot get the height of the hidden elements. I would say use .show () to show the div, get the height and then use .hide () to hide it again.