假设我使用 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)时会正确发生任何所需的重绘/回流。
最佳答案
一旦您的元素被添加到 DOM 中,就应该可以访问它,就像它从一开始就存在一样。简单明了的 DOM 操作是同步的。
开始引入超时、间隔和 Ajax 时要小心。
关于javascript - 将元素添加到 DOM 树后,元素的尺寸是否可立即读取?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2190005/