如何知道通过 style 属性设置的 CSS 何时应用于 DOM？

Question

简单的问题，是否有一个事件或回调表明通过 JS“style”属性设置的 CSS 已应用并渲染到 DOM。 这是一个例子。

const elem = document.querySelector("#abc");
elem.style.color = "red";
excuteAfterCSSAppliedToDOM(() => {
 // some code to excute
});

Answer 1

当您的代码执行分配时，该属性会立即同步应用。下次绘制页面时，它将在屏幕上呈现。您可以使用 requestAnimationFrame

 在发生之前 

获得回调。对于稍后的回调，请使用超时为零的嵌套 requestAnimationFrame

 或 

setTimeout

：

function excuteAfterCSSAppliedToDOM(callback) {
    requestAnimationFrame(() => requestAnimationFrame(callback));
}