代码之家 › 专栏 › 技术社区 › user85509

元素的维度在添加到dom树后是否立即可读?

reflow dimensions dom javascript

4

user85509 · 技术社区 · 16 年前

假设我使用 document.createElement ,添加一些内部文本,并确定其高度和宽度。在将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触发的repaint/reflow事件是该线程的一部分,在继续下一个语句之前完成”……但有人能检查一下我的理解吗?

这个 Opera article 有很多我要找的,但不清楚它是如何具体歌剧。在任何情况下,应用程序开发人员都可以假设在进行测量(例如通过访问OffsetWidth)时正确地进行了任何所需的重新绘制/回流。

2 回复 | 直到 16 年前

1

Christopher Parker 16 年前

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

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

2

0

Sarfraz 16 年前

据我所知,它们只有在所有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?
};