javascript - 在 CSS 更改后立即读取元素的视觉属性？

Question

我正在尝试使用 CSS 更改 HTML 页面上的元素，然后立即读取其视觉属性。但是，直到稍后(下一个“框架”)才应用 CSS 强制样式。

CSS:

.node {
    width: 10px;
}

JavaScript:

// Create element
var element = document.createElement("div");
element.className = "node";
document.body.appendChild(element);

console.log(element.clientWidth);

上面的log 调用的输出应该是10，但是如果立即调用它是NaN(但它被正确读作10 一帧之后)。

使用 getComputedStyle() 得到类似的结果:

var style = getComputedStyle(element);
console.log(element.style);

第一次运行时输出为“”，但在第一帧之后输出为“10px”(正确)。

我假设我必须等待一次浏览器的重新布局，直到我可以读取该属性。有没有办法强制浏览器计算该元素的尺寸？或者这可能是不好的做法；有没有直接的方法来读取 CSS 的宽度属性？

换句话说，这里的最佳实践是什么？

注意:尽量避免在此处使用 jQuery 或其他库。

Answer 1

尝试访问 computedStyle。

var computedStyle = document.defaultView ? document.defaultView.getComputedStyle(element, null) : element.currentStyle;

然后阅读

console.log( computedStyle.width);

示例:http://jsfiddle.net/mGCT5/1/