如何使用纯 JavaScript 检索元素的所有适用 CSS 规则？

使用 JavaScript 查找适用于元素的 CSS 规则

在 Web 开发中，访问特定类或 ID 的 CSS 元素是一项常见任务，通常由工具和 API 辅助。然而，浏览器会编译来自各种来源的所有适用的 CSS 规则来确定元素的外观。我们如何在纯 JavaScript 中复制此功能，而不依赖浏览器插件？

识别计算的 CSS 规则

考虑以下 HTML 和 CSS 示例：

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

<p>

在这种情况下，元素 p#description 继承了两个 CSS 规则：红色和字体大小20 像素。目标是确定这些规则的起源。

JavaScript 实现

为了实现这一点，我们可以使用以下 JavaScript 函数：

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

用法

var rules = css(document.getElementById('elementId'));

规则变量现在将包含适用于所选元素的所有 CSS 规则的数组。

注意：

此函数依赖于 Element.matches() 方法，该方法需要一个跨针对旧版浏览器的浏览器兼容性polyfill。然而，它提供了一种快速有效的识别 CSS 规则的方法，无需额外的浏览器插件。

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