将元素的尺寸添加到 DOM 树后是否立即可读？答案

【问题标题】：Are an element's dimensions readable immediately upon adding it to the DOM tree?将元素的尺寸添加到 DOM 树后是否立即可读？
【发布时间】：2011-01-12 11:57:13
【问题描述】：

假设我使用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）正确地发生了任何所需的重绘/重排。

【问题讨论】：

标签： javascript dom dimensions reflow

【解决方案1】：

一旦您的元素被添加到 DOM 中，它就应该可供访问，就好像它从一开始就在那里一样。简单、简单的 DOM 操作是同步的。

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

【讨论】：

我的问题更多的是，在我执行 offsetWidth 时，会改变尺寸的重绘/回流是否完成。无论如何，似乎可以安全地假设是这种情况；重绘/重排可以被认为是 JavaScript 执行的同一线程的一部分。我会继续接受这个。

【解决方案2】：

据我所知，只有在所有 javascript 函数或属性都对 DOM 树中已经存在的元素起作用之后，它们才被添加到 DOM 树后才可读。

我尝试了这两种情况，结果证明效果很好：

<SCRIPT>
window.onload = function() {
textDiv = document.createElement("div");
textDiv.innerHTML = "some dynamically created string";
alert(textDiv.offsetWidth); // 0
document.body.appendChild(textDiv);
alert(textDiv.offsetWidth); // OK?
};

【讨论】：

这些警报本身可能会影响渲染。改用 console.log 和 Firebug 试试。