查找适用于某个元素的所有 CSS 规则

许多工具/API 提供了选择特定类或ID 的元素的方法。还可以检查浏览器加载的原始样式表。

但是，为了让浏览器呈现元素，它们将编译所有 CSS 规则（可能来自不同的样式表文件）并将其应用到该元素。这就是您在 Firebug 或 WebKit Inspector 中看到的内容 - 元素的完整 CSS 继承树。

如何在纯 JavaScript 中重现此功能而不需要额外的浏览器插件？

也许一个例子可以为我正在寻找的内容提供一些澄清：

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>

<p id="description">Lorem ipsum</p>

这里的 p#description 元素应用了两个 CSS 规则：红色和 20 像素的字体大小。

我想找到这些计算的 CSS 规则的来源（颜色来自 p 规则等）。

由于这个问题目前没有轻量级（非库）、跨浏览器兼容的答案，我将尝试提供一个：

function css(el) {
    var sheets = document.styleSheets, ret = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector 
        || el.msMatchesSelector || el.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (el.matches(rules[r].selectorText)) {
                ret.push(rules[r].cssText);
            }
        }
    }
    return ret;
}

JSFiddle：http://jsfiddle.net/HP326/6/ http://jsfiddle.net/HP326/6/

Calling css(document.getElementById('elementId'))将返回一个数组，其中包含与传递的元素匹配的每个 CSS 规则的元素。 如果您想了解有关每条规则的更多具体信息，请查看CSSRule对象 https://developer.mozilla.org/en-US/docs/Web/API/CSSRule文档。