如何通过编程方式获取HTML元素计算样式对应的父样式表？

核心问题 #

在Chrome等浏览器的开发者工具中，查看元素计算样式时能看到每个属性对应的来源样式表链接，但如何通过编程方式获取这个关联的样式表引用？优先浏览器无关方案，也接受Chrome、Firefox、Edge、Safari支持的脚本方案。

已知document.styleSheets能遍历所有样式表和规则，但无法定位到为指定元素属性提供最终生效值的规则；getComputedStyle()和computedStyleMap()能返回生效值，但未关联父样式表。

可行方案 #

1. 利用getMatchedCSSRules（主流浏览器支持，非标准） #

这个方法会返回匹配目标元素的所有CSS规则，每个规则的parentStyleSheet属性就是其所属的样式表。通过遍历这些规则，对比规则中的属性值与元素的计算值，就能找到对应样式表：

function getAssociatedStyleSheet(element, propertyName) {
  // 获取匹配元素的所有CSS规则
  let matchedRules = [];
  if (typeof window.getMatchedCSSRules === 'function') {
    matchedRules = window.getMatchedCSSRules(element);
  } else {
    // 兼容无getMatchedCSSRules的环境，遍历所有样式表规则匹配
    Array.from(document.styleSheets).forEach(sheet => {
      try {
        Array.from(sheet.cssRules).forEach(rule => {
          if (rule.selectorText && element.matches(rule.selectorText)) {
            matchedRules.push(rule);
          }
        });
      } catch (err) {
        // 跨域样式表受同源策略限制，无法访问规则，直接跳过
        console.warn('无法读取跨域样式表:', sheet.href);
      }
    });
  }

  // 按CSS优先级倒序遍历（确保先检查高优先级规则）
  matchedRules.sort((a, b) => {
    // 计算规则特异性，用于优先级排序
    const getSpecificity = (rule) => {
      const selector = rule.selectorText;
      let idCount = (selector.match(/#[a-zA-Z0-9_-]+/g) || []).length;
      let classCount = (selector.match(/\.[a-zA-Z0-9_-]+/g) || []).length;
      let tagCount = (selector.match(/[a-zA-Z0-9_-]+(?=[.#\s{])/g) || []).length;
      return (idCount << 16) + (classCount << 8) + tagCount;
    };
    return getSpecificity(b) - getSpecificity(a);
  });

  const computedValue = getComputedStyle(element).getPropertyValue(propertyName);
  for (const rule of matchedRules) {
    const ruleValue = rule.style.getPropertyValue(propertyName);
    // 对比规则值与计算值，忽略大小写和空格差异
    if (ruleValue.trim().toLowerCase() === computedValue.trim().toLowerCase()) {
      return rule.parentStyleSheet;
    }
  }

  // 检查内联样式
  if (element.style.getPropertyValue(propertyName)) {
    return null; // 内联样式无关联样式表
  }

  return null;
}

// 使用示例
const target = document.getElementById('test-element');
const styleSheet = getAssociatedStyleSheet(target, 'background-color');
if (styleSheet) {
  console.log('对应样式表:', styleSheet.href || '内联样式表');
} else {
  console.log('未找到对应样式表（可能是浏览器默认样式）');
}

2. 注意事项 #

• 同源限制：跨域加载的样式表无法读取其规则，会抛出安全错误，代码中需捕获并跳过这类样式表。
• 优先级处理：CSS规则的特异性、重要性、声明顺序会影响最终生效值，代码中通过计算特异性排序，确保优先检查高优先级规则。
• 默认样式：如果属性值来自浏览器默认样式，无法找到对应的自定义样式表，会返回null。
• 内联样式：元素style属性中的样式无关联样式表，直接返回null。

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