如何在JavaScript中获取CSS公式值而非计算后的值？

window.getComputedStyle的设计就是返回元素最终渲染的计算值，所以拿不到calc()这类原始表达式。要获取原始CSS声明，得根据样式的定义位置来处理：

1. 内联样式 #

如果样式直接写在元素的style属性里，直接读取元素的style对象即可：

$0.style.getPropertyValue('height');

只要内联样式里写的是calc(100vh - 305px)，这个方法就能直接返回原始表达式。

2. 内部/外部样式表 #

如果样式定义在<style>标签或外部CSS文件中，需要遍历文档的样式表，找到匹配目标元素的规则：

function getOriginalCSSValue(element, property) {
  // 先查内联样式
  const inlineVal = element.style.getPropertyValue(property);
  if (inlineVal) return inlineVal;

  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        // 检查当前元素是否匹配规则的选择器
        if (element.matches(rule.selectorText)) {
          const ruleVal = rule.style.getPropertyValue(property);
          if (ruleVal) return ruleVal;
        }
      }
    } catch (err) {
      // 跨域样式表会触发权限错误，直接跳过
      continue;
    }
  }

  // 兜底：如果找不到原始值，返回计算后的值
  return window.getComputedStyle(element).getPropertyValue(property);
}

// 使用示例（$0是Safari控制台选中的元素）
console.log(getOriginalCSSValue($0, 'height'));

注意事项 #

• 跨域加载的外部样式表无法访问其规则，会触发权限异常，这类情况只能跳过。
• 如果多个样式规则匹配目标元素，函数会返回第一个找到的匹配规则的属性值，不一定是最终生效的优先级最高的规则（如果需要精确匹配优先级，还需要额外处理规则的权重计算）。

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