如何使用纯 JavaScript 检索应用于特定元素的所有 CSS 规则？

获取与元素关联的所有 CSS 规则

浏览器渲染涉及编译 CSS 规则并将其应用于特定元素。这个分层过程最终导致元素的最终外观，如 Firebug 等浏览器工具所示。然而，在没有额外插件的情况下访问这些计算的 CSS 规则需要纯 JavaScript 中的自定义解决方案。

解决方案：

要检索元素的 CSS 规则，我们可以利用 JavaScript 的DOM API 和 CSSRule 对象。以下代码片段提供了跨浏览器兼容的解决方案：

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;
}

此函数将一个元素作为输入并返回一个包含适用于该元素的 CSS 规则的数组。要检索特定元素的规则，只需调用 css(document.getElementById('elementId'))。

示例：

考虑以下 HTML 和 CSS：

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

<p>

调用 css(document.getElementById('description')) 将返回以下内容array:

[
    "p { color: red; }",
    "#description { font-size: 20px; }"
]

此数组列出了应用于该元素的两个 CSS 规则，让您清楚地了解其最终外观。

以上是如何使用纯 JavaScript 检索应用于特定元素的所有 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！