如何获取元素显式设置的CSS属性值而非浏览器计算值

window.getComputedStyle 返回的是浏览器经过层叠计算、补全默认值后的最终生效样式，所有CSS属性都会有返回值，哪怕你从未显式设置过，也会返回auto、默认像素值等结果，无法直接拿到仅显式设置的属性，要实现需求可以按下面的方案处理。

1. 仅获取行内显式设置的样式 #

如果只需要拿到HTMLstyle属性、JS动态赋值（包含React/Vue等SPA框架运行时写入的行内样式）的属性，直接读取元素自带的style对象即可，没有显式设置的属性会返回空字符串：

let ele = document.querySelector(".hello");
// 读取行内样式，未设置的属性返回空字符串
console.log(ele.style.backgroundColor); // 行内未设置时返回""
console.log(ele.style.height); // 行内未设置时返回""
console.log(ele.style.width); // 行内未设置时返回""，符合预期

注意：该方法无法获取写在<style>标签、外部CSS文件中的类选择器、ID选择器等非行内规则定义的样式。

2. 完整获取所有来源显式设置的样式 #

如果需要同时拿到行内样式 + 所有样式表中匹配当前元素的显式设置属性，可以通过遍历CSS规则的方式实现，逻辑如下：

• 遍历页面所有非浏览器默认的CSS样式表，跳过跨域无权限访问的样式表
• 遍历每个样式表的样式规则，校验规则选择器是否匹配目标元素
• 收集匹配规则中声明的所有CSS属性
• 最后合并行内样式（行内样式优先级最高，覆盖同属性的低优先级规则值）

可直接复用的实现代码：

/**
 * 获取元素上所有显式设置的CSS属性
 * @param {HTMLElement} ele 目标元素
 * @returns {Object} 键为CSS属性名，值为属性值，未显式设置的属性不会存在于返回结果中
 */
function getExplicitStyles(ele) {
  const explicitStyles = {};

  // 遍历所有可访问的样式表，收集匹配规则的样式
  for (const sheet of document.styleSheets) {
    // 跳过无权限访问的跨域样式表、无规则的空样式表
    try {
      if (!sheet.cssRules) continue;
    } catch (e) {
      continue;
    }

    for (const rule of sheet.cssRules) {
      // 跳过非样式规则（比如@font-face、@keyframes、@media等非直接定义样式的规则）
      if (!(rule instanceof CSSStyleRule)) continue;
      // 校验选择器是否匹配目标元素
      try {
        if (ele.matches(rule.selectorText)) {
          for (const prop of rule.style) {
            explicitStyles[prop] = rule.style.getPropertyValue(prop).trim();
          }
        }
      } catch (e) {
        // 忽略非法选择器的匹配错误
        continue;
      }
    }
  }

  // 合并行内样式，行内样式优先级最高
  for (const prop of ele.style) {
    explicitStyles[prop] = ele.style.getPropertyValue(prop).trim();
  }

  return explicitStyles;
}

// 用法示例
let ele = document.querySelector(".hello");
const explicitStyles = getExplicitStyles(ele);

console.log(explicitStyles['background-color']); // 输出 "red"
console.log(explicitStyles['height']); // 输出 "10px"
console.log(explicitStyles['width']); // 输出undefined，符合需求

注意事项 #

• 上述实现已经覆盖JS动态写入的行内样式、SPA框架运行时生成的样式、普通CSS文件/<style>标签里定义的样式
• 跨域引入的外部CSS文件（比如CDN引入的样式）受浏览器同源策略限制，无法通过JS读取规则内容，这部分样式如果需要识别，需要对应资源配置CORS允许跨域访问
• 如果需要精确匹配CSS层叠优先级（比如ID选择器优先级高于类选择器的属性覆盖逻辑），可以在收集规则时额外计算选择器权重，按权重从低到高排序后再写入属性值，简单场景下按规则出现顺序覆盖即可满足绝大多数需求

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