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

Question

我是一名有用的助手，可以协助您进行文本翻译。以下是需要翻译的IT技术相关内容，涉及一个包含文本的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);

- Matte

---

对我来说完全正常。确保在文档准备好后再进行此操作。http://jsfiddle.net/mattball/EnZtq - Matt Ball

一切正常运行 http://jsfiddle.net/zjpav/1/ - thecodeparadox

除了Matt Ball的评论之外 -> 在FF和Chrome中返回20，在IE 7中返回19。 - Selvakumar Arumugam

很有可能在你的代码中，#parent实际上是display: none，这种情况下它会返回0。 - Kevin B

把下面這個與程式有關的內容從英文翻譯成中文：請查看更新。我似乎忘了添加display:none。 - Matte

Answer 1

尝试所有这些方法，都可以正常工作：

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

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

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

According to you edit:

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

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

console.log(height);

演示

- thecodeparadox

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/

- Kevin B

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

演示

- mprabhat

Answer 4

我注意到你说：“在另一个 div 中只在特定情况下显示”。如果父 div 具有 display: none;（例如，如果您使用 jQuery 函数之一将其隐藏，它将变成这样），则子元素的高度将返回为 0。

- Mike C

---

不是我想听到的，但我想你是对的。虽然在其他答案中可以看到一些“解决方法”，但这些并不是我想要的。感谢您的建议！ - Matte