为什么getComputedStyle在元素创建后立即为像素值返回'auto'？

Question

我使用Mustache生成一些HTML并使用insertAdjacentHTML将其放在页面上。 它显然转换为DOM结构，因为我可以通过使用document.querySelector('.contentarea')调用来获取它的句柄。 但是，如果我尝试获取宽度或高度的像素值，它会继续抛回'auto' 。

认为它可能只是getComputedStyle的问题，我尝试使用.getBoundingClientRect和.offsetWidth 。 两者都返回0 。 如果我通过将调用放在setTimeout(function(){}, 1)稍微延迟调用，它可以工作，但这对我的生产代码来说不实用，因为它需要进入同步构造函数。

这种情况在Firefox（Aurora）和Chrome中都有发生。 我记得读过一篇关于Mozilla如何通过使用惰性框架构造来改进DOM操作性能的文章，并认为框架可能存在一些有点过于懒惰的错误，但是因为它也在Chrome中发生，所以这似乎不太可能。

有没有人对这里发生的事情或如何解决这个问题有任何想法？ 插入HTML后，我真的需要像素高度/宽度信息。

PS：是否有任何浏览器在单独的线程中进行HTML解析/构建？ 我在想这可能会导致这种行为。

NEVERMIND：这是我自己的错。 我只是没注意到display: none; 在代码尝试获取测量值之前设置的样式。

Answer 1

有几件事可能导致“自动”的结果。 你找到了其中一个; display: none 。 如果元素是内联的，它也将返回auto。

本质上它必须是一个block或inline-block元素，它必须被渲染。

Answer 2

根据我的经验，许多浏览器（IE，Chrome，Firefox）有目的地延迟计算布局，直到Javascript线程结束或通过超时调用产生。

我知道的唯一解决方案是屈服于浏览器然后重新启动。 您使用setTimeout方法效果很好。