测量页外元素的高度答案

【问题标题】：Measuring height of an off page element测量页外元素的高度
【发布时间】：2012-10-17 02:44:48
【问题描述】：

我在元素中进行 Ajaxing。我想根据它们的高度来决定把它们放在哪里（想想盒子包装类型算法）。

当我循环遍历我的元素时，我总是得到0 的outerHeight：

posts.each(function(i, e) {
    var elementHeight = $(e).outerHeight();
    // elementHeight is always 0
});

如何获取元素的显示高度？

看来我必须将元素添加到页面才能获得高度，这是有道理的。
在尽可能简单地对用户不可见的同时执行此操作的最佳方法是什么？

【问题讨论】：

标签： javascript jquery outerheight

【解决方案1】：

将帖子附加到 hidden (display: none) div 元素，然后遍历它们以获得各自的 outerHeight 值。

HTML

<div id="postContainer"></div>

CSS

#postContainer { display: none;}

var cont = $('#postContainer'), postsLength = posts.length;
posts.each(function(i, e) {
    cont.append(e);
    if (!--postsLength) calcOuterHeight();
});

function calcOuterHeight(){
    cont.find('.posts').each(function(i, e){
        var oh = $(e).outerHeight();
    })
}

【讨论】：

我刚刚尝试添加到现有元素但无法立即查询高度，我想需要一个计时器/回调。
更新了我的代码以添加一个 outerHeight 函数，该函数只有在所有 posts 都附加到容器后才会执行。

【解决方案2】：

您必须将元素添加到页面中，以便它们通过布局过程，然后它们将具有大小。

您可以将它们添加到主体，获取高度，然后将它们删除。当元素在页面中时浏览器忙于运行您的代码，这些元素将永远不会显示：

var el = $('<div>test</div>');
$(document.body).append(el);
var h = el.height();
el.remove();

【讨论】：

如何在对用户不可见的情况下做到这一点？我可以将它们添加到左侧 -1000 然后查询高度然后将它们移动到我想要的位置吗？（没有任何计时器等？）
+1 那么，鉴于 OP 的要求，他如何在不向页面添加元素的情况下计算 高度是多少？
@ElRonnoco：不行，我想我需要一个回调来让布局刷新。
@GeorgeDuckett：您可以将元素添加到页面，获取它们的高度，然后删除它们。这样他们将完成布局过程，但 UI 不会在元素消失之前更新以显示元素。示例：jsfiddle.net/Guffa/gnz64