Question

我有一个动态内容（图像和文字）的div。然后我需要计算div的高度并做一些事情。

然而，它目前在添加内容之前计算div的高度。

有没有人有解决方案？

$('#results').find('article').addClass(result); // add class to entire section
$('#results article').find('.details h1 span').html(title); // add title
$('#results article').find('.details p').html(message); // add message

var windowHeight = $('#results').find('article').innerHeight();

Answer 1

您的内容中可能包含图片。你必须等待他们加载：

var $results = $('#results'),
    $article = $results.find('article'),
    deferreds = [];

$article.addClass(result); // add class to entire section
$article.find('.details h1 span').html(title); // add title
$article.find('.details p').html(message); // add message

$results.find('img').each(function()
{
    var deferred = $.Deferred();

    deferreds.push(deferred);

    this.onload = function() { deferred.resolve(); }
});

$.when.apply($, deferreds).then(function()
{
    var windowHeight = $article.innerHeight();
});

此方法使用jQuery的Deferreds，这使得跟踪所有load事件变得非常容易。

Answer 2

如果这对于尚未加载的图片不是问题，那么您可能只需要自己触发布局，以便获得所需的尺寸。

在脚本完成之前，浏览器通常不会布置新内容（并且确定您已完成更改DOM）。您可以通过向DOM询问浏览器知道需要布局的相关维度来触发脚本中的布局。

请参阅此文章http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html以获取将触发布局的属性列表。

Answer 3

使用下面的代码

，您可以在加载所有动态数据后触发代码查找高度

$(window).load(function(){

   var divHeight = $('#yourDivId').height()
}

希望它会有所帮助

如何在动态添加内容后计算div的高度？

3 个答案: