javascript - 查找适用于元素的所有 CSS 规则

Question

许多工具/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 规则等等)。

Answer 1

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

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/

调用 css(document.getElementById('elementId')) 将返回一个数组，其中每个 CSS 规则都有一个与传递的元素匹配的元素。如果您想了解有关每个规则的更多具体信息，请查看 CSSRule object文档。