Question

我正在尝试使用jQuery获取元素的高度，但由于某种原因，它总是返回0。

我在容器中使用ajax加载内容。默认情况下隐藏此内容（display: none）。在显示内容之前，我需要检索新内容中元素的高度。

我的简化代码：

success: function(data) // this is the success callback of jquery's ajax call
{
  var content = $('#content');
  content.fadeOut('slow', function() {
    content.html(data.html);
    set_comments_height();
    content.fadeIn('slow');
  });
}

function set_comments_height()
{
  var content = $('#content');
  var info = $('.trackinfo .artwork-and-info', content);

  console.log(parseInt(info.outerHeight(true), 10));
}

点击左侧的曲目后，您可以在my website上看到问题。

我可能在这里遗漏了一些东西，但我不明白为什么它没有返回正确的高度。

Answer 1

对于outerHeight()属性设置为display的元素，

none将返回0。为了解决这个问题，在你的AJAX成功处理程序中，在设置html之前，将元素的opacity设置为0，将display设置为block（它仍然不会显示为不透明度0）。设置html后，调用set_comments_height（）函数，然后调用css动画将其恢复为opacity: 1

即

success: function(data) // this is the success callback of jquery's ajax call
{
  var content = $('#content');
  content.fadeOut('slow', function() {

    // opacity -> 0 and display -> block
    content.css({'opacity': 0, 'display': 'block'});

    content.html(data.html);
    set_comments_height();

    // instead of fadeIn, use CSS animation to bring it to opacity 1
    content.animate({'opacity': 1}, 'slow');

  });
}

获取元素高度的问题

1 个答案: