如何在纯 JavaScript 中检索影响元素的所有 CSS 规则？

确定影响纯 JavaScript 中元素的所有 CSS 规则

在 Web 开发中，检查浏览器加载的原始样式表仅提供部分信息了解应用于元素的 CSS 规则。这是因为浏览器编译所有 CSS 规则并将它们应用到基于继承的元素，从而产生复杂的继承树，该树在样式表中不会立即显现出来。

对于寻求纯 JavaScript 解决方案来重现此功能的开发人员，检索在不依赖其他浏览器插件的情况下，计算影响元素的 CSS 规则的详细信息构成了重大挑战。不过，这里有一个全面的解决方案：

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 文本的数组。

为了说明其用法，请考虑以下内容HTML 和CSS:

HTML

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

<p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

在此示例中，该函数识别两个匹配的 CSS规则：为所有

指定红色。元素，另一个将 ID 为 #description 的元素的字体大小设置为 20 像素。

返回的数组允许通过引用 CSSRule 对象文档进一步探索每个规则的详细信息。这种方法提供了一种全面且与浏览器兼容的方法，用于提取应用于元素的计算 CSS 规则，而无需额外的插件，使开发人员能够深入检查和调试其样式。

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