Question

我有一个固定高度的DIV：

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

如果我在其中放置文本，它将隐藏超出100px的所有内容。我有一个显示所有文本的按钮，基本上就是这样：

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

这会使所有文字都可见，但我想为此设置动画。这对于height ='auto'不起作用，它必须具有特定的高度。

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

Answer 1

像这样尝试scrollHeight：

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

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

Answer 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");
  });  
});

Answer 3

T.J。克劳德的答案对我来说并不适合，因为＆＃34; oldHeight＆＃34;是一个计算的像素值，不同于我在样式表中指定的rem值。此外，内联样式覆盖了我对另一个媒体查询的不同高度。所以，而不是保存＆＃34; oldHeight＆＃34;然后把它放回去，我只是通过设置css＆＃39; height＆＃39;来清除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");

    });  
});

在jQuery中选择DIV的真实高度

3 个答案: