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

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

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等测量时正确地发生任何所需的重绘/回流。

来源

2010-02-03 user85509

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

当你开始引入超时，间隔和Ajax时要小心。

来源

2010-02-03 17:16:27

我的问题是更多的重绘/ reflow是否会改变尺寸完成时，我做了offsetWidth。无论如何，这似乎可以安全地假设是这样的;重绘/回流可以被认为是JavaScript执行的同一线程的一部分。我会继续接受这个。 – user85509 2010-02-04 04:41:38

据我所知，只有当它们被添加到DOM树后，它们才可读，因为所有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-03 06:15:32 Sarfraz

这些警报本身可能会影响渲染。改用'console.log'和Firebug来代替它。 – 2010-02-03 10:35:17

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

回答

相关问题