如何以编程方式检索 JavaScript 中元素适用的 CSS 规则？

检索元素适用的 CSS 规则

简介：
Web 浏览器将各种样式表中的 CSS 样式应用到元素来渲染它们。 Firebug 等工具公开此信息，显示每个元素的 CSS 继承树。本文阐述了如何在不使用浏览器插件的情况下在纯 JavaScript 中复制此功能。

解决方案：
要确定应用于元素的 CSS 规则：

1. 获取文档的样式表：访问与文档关联的样式表数组文档。
2. 迭代 CSS 规则：循环遍历每个样式表及其规则。
3. 检查适用性：使用 matches() 方法确定元素是否与 CSS 规则的选择器文本匹配。
4. 捕获适用规则： 如果找到匹配项，则将 CSS 文本推送到数组中。

以下是实现此解决方案的示例 JavaScript 代码：

function css(el) {
    var sheets = document.styleSheets;
    var 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(document.getElementById('elementId'))。它将返回一个包含所应用的 CSS 规则作为字符串的数组。

示例：

考虑此示例 HTML 和 CSS：

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

<p>

调用css(document.getElementById('description')) 将生成一个包含两个的数组elements:

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

此函数提供了一种简单且跨浏览器兼容的方法来检索纯 JavaScript 中任何给定元素的适用 CSS 规则。

以上是如何以编程方式检索 JavaScript 中元素适用的 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！