使用getComputedStyle()时如何获取CSS声明的原始百分比值

方法1：遍历样式表匹配最高优先级规则（通用方案，适用于所有场景） #

浏览器没有提供直接获取最终生效原始CSS声明值的API，需要手动遍历所有样式表规则，匹配作用于当前元素的规则，计算优先级后取最高优先级的属性原始值。

function getRawCssProperty(element, propName) {
  // 优先判断行内样式
  const inlineStyle = element.style.getPropertyValue(propName)
  if (inlineStyle) return inlineStyle.trim()

  let highestPriority = 0
  let matchedValue = null

  // 遍历所有样式表
  for (const sheet of Array.from(document.styleSheets)) {
    try {
      // 跨域样式表会禁止访问cssRules，捕获异常跳过
      const rules = Array.from(sheet.cssRules || [])
      for (const rule of rules) {
        // 跳过非样式规则（比如@import、@media等，需要更完善可自行扩展）
        if (!(rule instanceof CSSStyleRule)) continue
        // 判断当前规则选择器是否匹配目标元素
        if (!element.matches(rule.selectorText)) continue

        // 取当前规则的属性值
        const propValue = rule.style.getPropertyValue(propName)
        if (!propValue) continue

        // 优先级简化判断：!important > 选择器权重，如需精确权重可自行实现完整算法
        const isImportant = rule.style.getPropertyPriority(propName) === 'important'
        const currentPriority = isImportant ? 10000 : getSelectorWeight(rule.selectorText)

        if (currentPriority > highestPriority) {
          highestPriority = currentPriority
          matchedValue = propValue.trim()
        }
      }
    } catch (e) {}
  }
  return matchedValue
}

// 简化选择器权重计算，仅覆盖基础的id、类、标签选择器
function getSelectorWeight(selector) {
  const idCount = (selector.match(/#/g) || []).length
  const classCount = (selector.match(/\./g) || []).length
  const tagCount = (selector.match(/[a-zA-Z]+(?=[\s.,#:]|$)/g) || []).length
  return idCount * 100 + classCount * 10 + tagCount
}

// 测试用例
const element = document.querySelector('.col')
console.log(getRawCssProperty(element, 'width')) // 输出 50%

注意事项：

• 跨域加载的CSS文件默认无法读取内部规则，该方案会自动跳过跨域样式表
• 若需要支持@media、@layer等特殊规则，需额外扩展规则匹配逻辑
• 可根据需求完善选择器权重计算逻辑，以上代码仅做基础实现

方法2：CSS变量中转（可控代码场景最优方案） #

如果是可自行维护的项目，用CSS变量存储原始值是最简单的方案，性能远高于遍历样式表：

CSS代码 #

.col{
  --raw-width: 40%;
  width: var(--raw-width);
}
.col{
  --raw-width: 50%;
  width: var(--raw-width);
}

JS代码 #

const element = document.querySelector('.col')
const rawWidth = window.getComputedStyle(element).getPropertyValue('--raw-width').trim()
console.log(rawWidth) // 输出 50%

该方案不需要手动处理样式表遍历和优先级计算，浏览器会自动处理变量的优先级覆盖，直接读取计算后的变量值即可拿到原始百分比。

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