如何获取被JavaScript修改前的CSS变量原始值？

你通过document.body.style.setProperty设置的是元素的内联样式，CSS优先级高于样式表中定义的同名变量，所以审查元素时旧值被标记为划掉（被覆盖），原始规则仍然存在于样式表中，完全可以在不删除当前设置的前提下拿到原始值，可选方案如下：

方案1：遍历样式表直接读取原始定义 #

不需要修改当前生效的任何样式，直接从CSS规则中匹配对应变量的原始值：

function getCSSVariableOriginalValue(varName, targetSelector = ':root') {
  for (const sheet of Array.from(document.styleSheets)) {
    try {
      for (const rule of Array.from(sheet.cssRules || sheet.rules)) {
        // 匹配对应选择器的样式规则
        if (rule.type === CSSRule.STYLE_RULE && rule.selectorText === targetSelector) {
          const value = rule.style.getPropertyValue(varName).trim();
          if (value) return value;
        }
      }
    } catch (e) {
      // 跨域引入的样式表无法访问规则，直接跳过
      continue;
    }
  }
  // 如果:root下未找到，自动匹配body下的规则
  if (targetSelector !== 'body') return getCSSVariableOriginalValue(varName, 'body');
  return null;
}

// 调用示例
const originalValue = getCSSVariableOriginalValue('--rh__primary-base');
console.log('原始变量值：', originalValue);

注意：如果变量定义在非:root、非body的自定义选择器下，需要自行修改入参的targetSelector值。

方案2：临时移除内联样式读取后恢复 #

操作完全同步，不会触发页面重绘，用户无感知，且不需要关心变量原始定义的位置：

function getOverriddenCSSVarValue(varName) {
  // 暂存当前内联设置的变量值
  const currentInlineValue = document.body.style.getPropertyValue(varName).trim();
  // 移除内联设置，此时计算样式会回退到原始值
  document.body.style.removeProperty(varName);
  const originalValue = getComputedStyle(document.body).getPropertyValue(varName).trim();
  // 恢复内联设置
  if (currentInlineValue) {
    document.body.style.setProperty(varName, currentInlineValue);
  }
  return originalValue;
}

// 调用示例
const originalValue = getOverriddenCSSVarValue('--rh__primary-base');
console.log('原始变量值：', originalValue);

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