检测HTML标签样式变更并获取对应变更值的方法

MutationObserver本身不会直接提供单个样式属性的变更细节，但可以通过对比变更前后的style属性值来提取具体的变更内容，步骤如下：

1. 配置MutationObserver获取旧值 #

要对比样式变化，必须在observe配置中开启attributeOldValue: true，这样才能拿到变更前的style属性值：

var variables_observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 这里处理变更逻辑
  });
});

var target = document.documentElement;
variables_observer.observe(target, {
  attributes: true,
  attributeFilter: ['style'],
  attributeOldValue: true // 关键：开启后才能获取变更前的style值
});

2. 解析样式字符串为键值对 #

写一个工具函数，把style的字符串格式转换成对象，方便对比：

function parseStyle(styleStr) {
  const styleObj = {};
  if (!styleStr) return styleObj;
  // 拆分每个样式属性
  styleStr.split(';').forEach(item => {
    const [key, value] = item.trim().split(':');
    if (key && value) {
      styleObj[key.trim()] = value.trim();
    }
  });
  return styleObj;
}

3. 对比新旧样式，提取变更详情 #

在回调函数中，解析新旧style对象，找出新增或修改的属性：

var variables_observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    const oldStyle = parseStyle(mutation.oldValue);
    const newStyle = parseStyle(mutation.target.style.cssText);

    // 遍历新样式，对比旧样式找出变更
    for (const prop in newStyle) {
      // 新增属性 或 属性值被修改
      if (!oldStyle.hasOwnProperty(prop) || oldStyle[prop] !== newStyle[prop]) {
        console.log(prop); // 变更的样式属性（比如--size1）
        console.log(newStyle[prop]); // 变更后的属性值（比如100px）
      }
    }
  });
});

// 工具函数
function parseStyle(styleStr) {
  const styleObj = {};
  if (!styleStr) return styleObj;
  styleStr.split(';').forEach(item => {
    const [key, value] = item.trim().split(':');
    if (key && value) {
      styleObj[key.trim()] = value.trim();
    }
  });
  return styleObj;
}

var target = document.documentElement;
variables_observer.observe(target, {
  attributes: true,
  attributeFilter: ['style'],
  attributeOldValue: true
});

效果验证 #

以你给出的例子为例：

• 变更前：<html>
• 变更后：<html style="--size1:100px">

控制台会输出：

--size1
100px

如果是修改已有属性（比如把--size1从100px改成200px），同样会输出修改后的属性和值。

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