javascript - Element.height() 不正确，因为浏览器尚未完成渲染？

Question

我将 div1 附加到 div2，然后获取 div2 的 height()。如果我在调用 height() 之前等待 50 毫秒，我会得到一个不同的高度。好像我在浏览器完成渲染 div1 之前就得到了高度。任何人都知道我该如何解决这个问题。我正在添加相当多的元素，并且需要在每个元素之后检查高度，因此每个元素之间的延迟似乎加起来可能会造成相当长的延迟。

$(div2).append(div1);
console.log(div2.height()) // 295

where as...

$(div2).append(div1);
window.setTimeout(function(){
    console.log(div2.height()) // 245
},50)

Answer 1

您可以请求某些属性来强制布局。例如，如果您请求以下任何属性:

• 上偏移
• 向左偏移
• 偏移宽度
• 偏移高度
• 滚动顶部/左侧/宽度/高度
• clientTop/Left/Width/Height

浏览器将在返回值之前对该元素进行布局。如果您的布局很复杂，您可能需要请求多个对象的属性才能获得多个项目的正确布局。

参见 this answer和 this article有关该概念的更多详细信息和工作演示。