如何获得具有display:none的父元素的元素的高度?

时间:2011-05-30 11:54:23

标签: jquery html css

如何获得具有display: none父元素的元素的高度?

此处的示例:jsfiddle.net

由于

的Lukas

6 个答案:

答案 0 :(得分:6)

暂时show()元素来检索孩子的身高似乎正常。

<强> 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);

演示:jsfiddle.net/Gts6A/72

答案 1 :(得分:2)

您可以执行此操作,也可以使用此question中的黑客。

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

请参阅fiddle

答案 2 :(得分:1)

it's very difficult(in other word you can't)获取隐藏元素的高度...因为dom doesn't consider hidden elements while rendering the page

答案 3 :(得分:1)

隐藏的元素具有未定义的宽度和高度,因此无法获得em。

答案 4 :(得分:1)

这有点笨拙,但你必须先渲染一个物体才能测量它。

var $target = $("#target");

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

答案 5 :(得分:0)

您应该显示div,否则无法获得隐藏元素的高度。我会说,使用.show()显示div,获取高度,然后使用.hide()再次隐藏它。