如何检测样式表（styleSheet）CSS变更？MutationObserver仅支持监听元素行内CSS变化

你当前使用的MutationObserver仅监听DOM元素本身的属性变化，而修改类关联的样式表规则时，没有修改元素节点的任何属性，因此不会触发回调。可通过以下两种方案实现需求：

方案1：监听全局样式表变动 #

适用于需要跟踪所有样式规则修改的场景，覆盖DevTools修改类样式、JS动态增删样式节点等操作。

// 监听所有<style>、<link rel="stylesheet">节点的变动
const styleObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    const target = mutation.target;
    // 检测已有样式节点的属性或内容变化
    if (target.tagName === 'STYLE' || (target.tagName === 'LINK' && target.rel === 'stylesheet')) {
      console.log('样式表发生变动', mutation);
      // 此处添加自定义业务逻辑
    }
    // 检测新增的样式节点
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'STYLE' || (node.tagName === 'LINK' && node.rel === 'stylesheet')) {
          console.log('新增样式节点', node);
        }
      })
    }
  })
})

// 监听head节点的所有子节点变动，覆盖样式相关操作
styleObserver.observe(document.head, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true,
  attributeFilter: ['href', 'rel']
})

局限说明：如果是直接通过CSSOM接口修改样式规则（例如document.styleSheets[0].cssRules[0].style.top = '20px'），不会触发DOM节点变动，该方案无法监听到，可搭配方案2使用。

方案2：监听指定元素的最终计算样式变动 #

无论样式变动来自行内样式、类规则、样式继承还是其他来源，只要元素最终渲染的样式发生变化就可以检测到，适合只需要关注特定元素样式变化的场景。

/**
 * 监听元素计算样式变化
 * @param {Element} el 要监听的DOM元素
 * @param {Array} propsToWatch 要监听的CSS属性名数组
 * @param {Function} callback 样式变化时的回调函数，参数为变动列表
 * @returns {Function} 停止监听的方法
 */
function watchElementStyle(el, propsToWatch, callback) {
  // 存储上一次的样式值
  let prevStyle = {};
  propsToWatch.forEach(prop => {
    prevStyle[prop] = getComputedStyle(el)[prop];
  })

  // 轮询检测样式变化，间隔可根据需求调整
  const timer = setInterval(() => {
    const currentStyle = getComputedStyle(el);
    const changedList = [];
    propsToWatch.forEach(prop => {
      const currentVal = currentStyle[prop];
      if (currentVal !== prevStyle[prop]) {
        changedList.push({
          property: prop,
          oldValue: prevStyle[prop],
          newValue: currentVal
        })
        prevStyle[prop] = currentVal;
      }
    })
    if (changedList.length) {
      callback(changedList);
    }
  }, 100)

  return () => clearInterval(timer);
}

// 调用示例
const stopWatch = watchElementStyle(
  document.querySelector('.exampleClass'),
  ['top', 'width', 'color'], // 要监听的CSS属性
  (changes) => {
    console.log('元素样式发生变动：', changes);
  }
)

// 不需要监听时调用即可停止
// stopWatch()

优化建议：如果没有特殊需求，只监听需要用到的CSS属性即可降低性能消耗；轮询间隔可根据实时性要求在50ms-200ms之间调整。

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