为什么 getComputedStyle 在创建元素后立即为像素值返回“自动”？答案

【问题标题】：Why does getComputedStyle return 'auto' for pixels values right after element creation?为什么 getComputedStyle 在创建元素后立即为像素值返回“自动”？
【发布时间】：2012-01-27 12:27:13
【问题描述】：

我使用 Mustache 生成一些 HTML，并使用 insertAdjacentHTML 将其放置在页面上。它显然已转换为 DOM 结构，因为我之后可以使用 document.querySelector('.contentarea') 调用来处理它。但是，如果我尝试获取宽度或高度的像素值，它会不断返回 'auto'。

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

Firefox (Aurora) 和 Chrome 都会出现这种情况。我记得读过一篇关于 Mozilla 如何通过使用惰性框架构造来提高 DOM 操作性能的文章，并认为可能存在框架有点太惰性的错误，但由于它也发生在 Chrome 中，所以似乎不太可能。

有人对这里发生的事情或如何解决它有任何想法吗？我真的需要在插入 HTML 后立即获得像素高度/宽度信息。

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

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

【问题讨论】：

你能发布一些相关的代码吗？ HTML 是否是可见的并且会导致重新流动？要强制浏览器重新流动（并获得正确的宽度或高度），您应该能够使用以下任何一种：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、 clientHeight 或 getComputedStyle()（IE 中的 currentStyle）。
你是对的。我搜索了前面的每一行代码，最后发现我在其中一个父元素上过早地设置了display: none;。

标签： javascript css dom

【解决方案1】：

根据我的经验，许多浏览器（IE、Chrome、Firefox）故意延迟计算布局，直到 Javascript 线程结束或通过超时调用退出。

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

【讨论】：

这是因为浏览器不希望在每个 DOM 操作上都重新布局页面，如果您正在执行一大堆顺序操作，这可能会非常浪费。因此，它会等到您的 JS 执行线程完成，然后布置页面并呈现它。具体如何工作取决于浏览器。
如果程序专门通过调用getComputedStyle 或其他方法之一来询问信息，我会认为它会例外。
@download: 屈服于浏览器告诉它做自己的事情并（重新）布局 dom 更改/添加。

【解决方案2】：

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

本质上它必须是block 或inline-block 元素并且它必须被渲染。

【讨论】：