在 jQuery 中选择 DIV 的真实高度答案

【问题标题】：selecting the true height of a DIV in jQuery在 jQuery 中选择 DIV 的真实高度
【发布时间】：2011-04-22 20:29:18
【问题描述】：

我定义了一个固定高度的 DIV：

.w {
  height: 100px;
  overflow: hidden;
}

如果我在其中输入文字，它将隐藏超过 100 像素的所有内容。我有一个显示所有文本的按钮，基本上它是这样做的：

$('.w').height('auto');

这将使所有文本可见，但我想对此进行动画处理。这不适用于 height='auto'，它必须具有特定的高度。

问题：如何获得 DIV 应该能够在其中显示所有文本的高度？

【问题讨论】：

标签： jquery html height

【解决方案1】：

像这样尝试scrollHeight：

$('#ID_OF_DIV')[0].scrollHeight

注意[0]，因为它是 DOM 元素的属性。

【讨论】：

好的，这确实有效！该数组是否记录在某处？我永远不会猜到这个！ ;-)
@patrick: "这个数组文档在某个地方吗？" 是的，这是链接：docs.jquery.com/Types#jQuery jQuery 实例（除其他外）是当前集合中的 DOM 元素。所以var jqobj = $('#foo'); 为您提供了 ID 为“foo”（如果有）的元素的 jQuery 实例。您可以通过jqobj[0] 访问原始元素，通过jqobj.length 访问匹配元素的数量。与真正的数组不同，您应该将length 属性和元素条目视为只读。（续）
（继续）..只读。例如，切勿使用jqobj.length = 3; 或jqobj[0] = someElement;（尽管您可以在合理范围内使用jqobj[0] 的实际元素做您喜欢的事情）。始终通过 jQuery 函数调用来修改 jQuery 实例的内容。但访问原始 DOM 元素已记录并支持。
这行得通，应该是公认的答案！非常感谢！

【解决方案2】：

您可以将高度设置为“自动”，然后测量它，然后将其重新设置并开始效果。

类似这样的东西 (live example)：

jQuery(function($) {

  // Div starts with "style='height: 10px; overflow: hidden"
  var div = $('#thediv');

  // On click, animate it to its full natural height
  div.click(function() {
    var oldHeight, newHeight;

    // Measure before and after
    oldHeight = div.height();
    newHeight = div.height('auto').height();

    // Put back the short height (you could grab this first
    div.height(oldHeight);
    div.animate({height: newHeight + "px"}, "slow");
  });  
});

【讨论】：

div.height('auto').height() 似乎效果很好！感谢这个解决方案。我认为它比 div[0].scrollheight 更优雅一些。使其更具可读性
如果您有 transition: height ... css 规则，这可能不起作用。
@JamesM.Lay - 可能不是，不。但我认为如果你有 CSS 过渡和/或动画，你也不会使用 jQuery 动画......

【解决方案3】：

T.J. Crowder 的回答对我不起作用，因为“oldHeight”是一个计算出来的像素值，与我在样式表中指定的 rem 值不同。此外，内联样式覆盖了我对另一个媒体查询的不同高度。因此，我没有保存“oldHeight”并稍后将其放回去，而是通过将 css 'height' 设置为空字符串来清除 jQuery 的内联样式。

jQuery(function($) {

    // Div starts with "style='height: 10px; overflow: hidden"
    var div = $('#thediv');

    // On click, animate it to its full natural height
    div.click(function() {
        // Measure after
        var newHeight = div.height('auto').height();

        // Remove inline styles
        div.css('height', '');
        div.animate({height: newHeight + "px"}, "slow");

    });  
});

【讨论】：