如何获取DOM元素CSS属性的原始设定值（如百分比形式）？

这个问题我之前也踩过坑，确实有点反直觉——el.style和getComputedStyle都满足不了需求，得换个思路来解决。

先搞懂为什么现有方法拿不到原始值 #

• el.style.left只能读取元素内联样式（就是写在<div style="left:0%"></div>里的样式），外部CSS文件或者<style>标签里的样式它完全看不到，所以返回空字符串是正常的。
• window.getComputedStyle(el)返回的是浏览器计算后的最终渲染值，浏览器会自动把百分比、em、rem这些相对单位转换成绝对像素，所以拿不到你写的"0%"。

解决方案：遍历样式表找匹配的规则 #

要拿到CSS里写的原始值，得去遍历页面中所有的样式表，找到对应元素匹配的CSS规则，然后从规则里读取属性值。

下面是一个实用的函数示例，能帮你获取指定元素的原始CSS属性值：

function getOriginalCSSValue(el, propertyName) {
  // 遍历页面中所有样式表
  for (let sheet of document.styleSheets) {
    try {
      // 兼容不同浏览器的规则集合（cssRules 是标准属性，rules 兼容旧IE）
      let rules = sheet.cssRules || sheet.rules;
      if (!rules) continue;

      // 遍历当前样式表的每一条规则
      for (let rule of rules) {
        // 检查当前元素是否匹配这条规则的选择器
        if (el.matches(rule.selectorText)) {
          // 获取规则中对应属性的原始值
          let value = rule.style.getPropertyValue(propertyName);
          if (value) {
            return value;
          }
        }
      }
    } catch (e) {
      // 跨域样式表会触发安全错误，直接跳过即可
      console.warn('无法访问跨域样式表:', sheet.href);
    }
  }
  // 如果没找到原始值，返回计算后的值作为兜底
  return getComputedStyle(el).getPropertyValue(propertyName);
}

// 使用示例
let targetElement = document.getElementById('your-element-id');
console.log(getOriginalCSSValue(targetElement, 'left')); // 输出 "0%"

几个注意点 #

• 跨域样式表限制：如果样式表是从其他域名加载的（比如CDN的CSS文件），浏览器的同源策略会阻止我们访问它的cssRules，这种情况只能跳过这类样式表。
• 选择器优先级：如果多个规则匹配同一个元素，函数会返回第一个匹配到的规则的值（按照样式表在页面中的加载顺序）。如果需要严格按照CSS优先级返回，还得额外处理选择器权重的计算。
• 旧浏览器兼容：element.matches()在旧IE里需要用msMatchesSelector，可以加个简单的兼容处理：

  if (!Element.prototype.matches) {
    Element.prototype.matches = Element.prototype.msMatchesSelector;
  }
  

这个方法不止适用于left属性，其他所有CSS属性都可以用同样的方式获取原始设定值～

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