如何使用纯 JavaScript 检查 CSS 继承树？

在 JavaScript 中检查 CSS 继承树

在 Web 开发中，了解 CSS 规则如何应用于网页上的元素至关重要。虽然浏览器工具提供了对这种继承树的深入了解，但我们可以使用纯 JavaScript 来复制这种分析吗？

重现 CSS 继承的需要

浏览器从各种来源编译 CSS 规则并将其应用到元素。这会产生一个全面的级联，定义每个元素的外观和布局。检查此继承树对于理解网页的视觉行为至关重要。

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

此函数接受一个元素作为输入，并返回一个包含适用于该元素的 CSS 规则的数组。数组中的每个元素代表一个特定的规则。

使用示例

要演示该功能，请考虑以下 HTML 和 CSS：

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

<p></p>

在此示例中， id 为“description”的元素应用了两个 CSS 规则：红色和 20px 的字体大小。调用 css(document.getElementById('description')) 将返回一个包含两个 CSS 规则字符串的数组。

进一步分析

有关每个规则的更多详细信息，您可以探索 CSSRule对象文档。

以上是如何使用纯 JavaScript 检查 CSS 继承树？的详细内容。更多信息请关注PHP中文网其他相关文章！