4

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

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 文章有很多我正在寻找的内容，但不清楚它是如何特定于 Opera 的。在任何情况下，应用程序开发人员似乎都可以假设在进行测量时（例如通过访问 offsetWidth）正确地发生了任何所需的重绘/重排。

4

2 回答 2

1

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

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

于 2010-02-03T17:16:27.313 回答
0

据我所知，只有在所有 javascript 函数或属性都对 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?
};

于 2010-02-03T06:15:32.737 回答