如何判断通过style属性设置的CSS已应用到DOM？

当你通过element.style直接修改元素样式时，浏览器不会立即触发渲染，而是将变更放入渲染队列。要在样式实际应用并完成渲染后执行代码，有两种常用可靠的方案：

方案1：嵌套使用requestAnimationFrame #

requestAnimationFrame的回调会在浏览器下一次重绘周期中执行，嵌套两层可以确保代码在样式完成渲染后运行：

const elem = document.querySelector("#abc");
elem.style.color = "red";

// 等待样式渲染完成后执行目标代码
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    // 此处代码可确保样式已渲染至DOM
    console.log("当前文字颜色（已渲染）：", getComputedStyle(elem).color);
  });
});

原理：第一个requestAnimationFrame等待浏览器完成样式计算与布局，第二个则等待重绘完成后进入下一帧，此时样式已经实际渲染到页面。

方案2：MutationObserver + requestAnimationFrame #

如果需要监听任意来源的style属性变更（不止是自身JS代码触发的），可以用MutationObserver监听属性变化，再配合requestAnimationFrame确保渲染完成：

const elem = document.querySelector("#abc");
const observer = new MutationObserver(() => {
  requestAnimationFrame(() => {
    // 样式已更新并完成渲染
    console.log("已渲染的样式：", elem.style.cssText);
  });
});

// 配置监听：仅关注style属性变化
observer.observe(elem, { attributes: true, attributeFilter: ["style"] });

// 触发样式变更
elem.style.color = "red";

注意：MutationObserver只能监听到style属性的修改事件，但此时样式可能还未完成渲染，必须搭配requestAnimationFrame才能精准匹配渲染完成时机。

不推荐使用setTimeout的原因 #

setTimeout的延迟时间不受浏览器渲染周期控制，无法精准匹配样式渲染完成的时间，可能早于或晚于实际渲染时机，因此可靠性极低。

内容的提问来源于stack exchange，提问作者Selman Hassen