javascript - 将元素添加到 DOM 树后，元素的尺寸是否可立即读取？

Question

假设我使用 document.createElement 动态创建一个 DIV，添加一些内部文本，并想确定它的高度和宽度。我可以看到在将 DIV 添加到 DOM 树之前，offsetWidth 和 offsetHeight 等属性为 0，这是预期的。一旦以编程方式将其添加到树中，我是否可以期望这些属性立即“准备就绪”，或者是否存在重绘/回流可能会延迟并稍后发生的环境？

textDiv = document.createElement("div");
textDiv.innerHTML = "some dynamically created string";
console.log(textDiv.offsetWidth); // 0
document.body.appendChild(textDiv);
console.log(textDiv.offsetWidth); // OK?

我认为答案类似于“JavaScript 解释器是单线程的，由 appendChild 触发的重绘/回流事件是该线程的一部分，并在继续执行下一条语句之前完成”......但是有人可以检查一下我的理解？

这Opera article有很多我正在寻找的东西，但不清楚它是如何特定于 Opera 的。在任何情况下，应用程序开发人员似乎都可以假设在进行测量(例如通过访问 offsetWidth)时会正确发生任何所需的重绘/回流。

Answer 1

一旦您的元素被添加到 DOM 中，就应该可以访问它，就像它从一开始就存在一样。简单明了的 DOM 操作是同步的。

开始引入超时、间隔和 Ajax 时要小心。