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

Question

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

An example here: jsfiddle.net

Thanks

Lukas

Answer 1

Temporarily show()ing an element to retrieve a child's height seems to work OK.

HTML:

<div id="target" style="display:none;">
    <!-- Add a background color to see if it's 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's 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.