jquery - jQuery：当父高度为0px时获取子元素的高度

Question

我有一个包含文本的 div，该文本仅在某些情况下显示在另一个 div 中。用于此的 HTML 很简单，如下所示：

<div id='parent'>
  <div id='child'>
    Some text inside child div
  </div>
</div>

样式看起来像：

#parent{ display:none; height:0px; }

使用 jQuery，如果 div 在父级之外，我想获取子级的高度。

以下 javascript 返回 0，我希望大约 15。

var child_height = $('#child').height();
alert(child_height);

Answer 1

尝试所有这些并且工作正常：

console.log($('#child').outerHeight());

console.log($('#child').css('height'));

console.log($('#child').height());

根据您的编辑：

var height = $('#parent').css({visibility: 'hidden', display : 'block'}).find('#child').height();

$('#parent').css({visibility: 'hidden', display: 'none'});

console.log(height);

演示

Answer 2

您可以暂时显示隐藏的父母，然后在以下情况下隐藏它们：

// .parents means it will search through all parents, not just first hidden
var hiddenParents = $("#child").parents(":hidden").show();
var childHeight = $("#child").height();
hiddenParents.hide();

alert(childHeight);

http://jsfiddle.net/zjpav/3/

Answer 3

var child_height = $('#child').outerHeight();
alert(child_height);​

演示

尽管在 FF 10 上，您的原始代码运行良好。

根据评论更新：

对于隐藏字段，它将返回零，您可以执行以下操作：

jQuery('#parent').css('display','block');
var child_height = $('#child').outerHeight();
alert(child_height);

child_height = $('#child').height();
alert(child_height);
jQuery('#parent').css('display','none');

演示

Answer 4

我注意到您说：“仅在某些情况下显示的另一个 div 内”。如果父 div 有display: none;（例如，如果您使用多个 jQuery 函数中的任何一个隐藏它，这就是它的最终结果），那么子 div 的高度将返回为 0。