如何通过JavaScript获取HTMLElement对应的所有StyleSheet对象？

这确实是个很实用的需求——浏览器调试工具能轻松定位元素样式对应的样式表，但原生CSSOM API确实没有直接提供这个能力，因为getComputedStyle返回的是计算后的最终样式，它已经和原始的样式表规则失去了直接关联。不过我们可以通过遍历页面所有样式表规则，匹配元素的生效样式来实现这个功能。

核心思路 #

1. 先获取元素的计算样式，拿到目标属性的最终值；
2. 遍历页面所有样式表，逐个检查里面的CSS规则；
3. 对于每个规则，判断它是否匹配目标元素，并且该规则下的目标属性值和计算值一致（还要考虑优先级和媒体查询等情况）；
4. 找到匹配的规则后，通过rule.parentStyleSheet就能拿到对应的样式表对象。

基础实现代码 #

function getStyleSheetForElementProperty(element, propertyName) {
    // 标准化属性名：把短横线命名转成驼峰（比如background-color → backgroundColor）
    const normalizedProp = propertyName.replace(/-([a-z])/g, (match) => match[1].toUpperCase());
    const computedStyle = window.getComputedStyle(element);
    const computedValue = computedStyle[normalizedProp];

    // 遍历页面所有样式表
    for (const sheet of document.styleSheets) {
        try {
            // 兼容IE的规则获取方式，同时处理跨域样式表的访问限制
            const rules = sheet.cssRules || sheet.rules;
            if (!rules) continue;

            // 遍历当前样式表的所有规则
            for (const rule of rules) {
                // 只处理普通的样式规则，跳过@media、@keyframes等嵌套规则
                if (rule.type !== CSSRule.STYLE_RULE) continue;

                // 检查规则选择器是否匹配目标元素
                if (element.matches(rule.selectorText)) {
                    const ruleValue = rule.style[normalizedProp];
                    // 规则的属性值和计算值一致时，说明这个规则是生效的（简化版判断）
                    if (ruleValue && ruleValue === computedValue) {
                        return sheet;
                    }
                }
            }
        } catch (e) {
            console.warn(`无法访问样式表 ${sheet.href}，可能存在跨域限制`, e);
        }
    }

    // 没找到对应样式表的情况：内联样式、浏览器默认样式等
    return null;
}

// 使用示例（比如在调试工具中选中元素后，获取它的color属性对应的样式表）
const targetElement = $0;
const colorStyleSheet = getStyleSheetForElementProperty(targetElement, 'color');
if (colorStyleSheet) {
    console.log(colorStyleSheet.href || '这是一个内联样式表');
} else {
    console.log('未找到对应样式表（可能是内联样式或浏览器默认样式）');
}

进阶优化：处理媒体查询和嵌套规则 #

上面的基础版会忽略@media等嵌套规则，我们可以通过递归遍历补全这个逻辑：

// 递归遍历所有嵌套规则
function traverseMatchingRules(rules, element, normalizedProp, computedValue, result) {
    for (const rule of rules) {
        if (rule.type === CSSRule.STYLE_RULE) {
            if (element.matches(rule.selectorText)) {
                const ruleValue = rule.style[normalizedProp];
                if (ruleValue && ruleValue === computedValue) {
                    result.sheet = rule.parentStyleSheet;
                    return;
                }
            }
        } else if (rule.type === CSSRule.MEDIA_RULE) {
            // 如果是@media规则，先判断当前媒体查询是否生效
            if (window.matchMedia(rule.media.mediaText).matches) {
                traverseMatchingRules(rule.cssRules, element, normalizedProp, computedValue, result);
                if (result.sheet) return; // 找到结果就提前终止
            }
        }
        // 还可以扩展处理@supports、@layer等其他类型的规则
    }
}

// 优化后的主函数
function getStyleSheetForElementProperty(element, propertyName) {
    const normalizedProp = propertyName.replace(/-([a-z])/g, (match) => match[1].toUpperCase());
    const computedStyle = window.getComputedStyle(element);
    const computedValue = computedStyle[normalizedProp];

    const result = { sheet: null };

    for (const sheet of document.styleSheets) {
        try {
            const rules = sheet.cssRules || sheet.rules;
            if (!rules) continue;

            traverseMatchingRules(rules, element, normalizedProp, computedValue, result);
            if (result.sheet) return result.sheet;

        } catch (e) {
            console.warn(`无法访问样式表 ${sheet.href}，可能存在跨域限制`, e);
        }
    }

    return result.sheet;
}

注意事项 #

• 跨域限制：如果样式表来自不同域名，浏览器会阻止页面脚本访问它的cssRules，这时候只能跳过该样式表，无法获取其规则。
• 样式优先级：上面的实现是简化版，只通过属性值匹配判断生效规则。如果需要更精准的结果，还需要计算规则的优先级（选择器权重、!important标记等），找到优先级最高的匹配规则。
• 内联样式：如果元素的样式是通过style属性设置的，那么不会对应任何样式表，函数会返回null。
• 默认样式：如果属性值是浏览器的默认样式，同样找不到对应的样式表。

浏览器调试工具之所以能轻松做到这一点，是因为它们拥有更高的权限，可以直接访问浏览器内部维护的样式关联关系，而我们在页面内只能通过这种遍历匹配的方式模拟实现。

内容的提问来源于stack exchange，提问作者Möhre