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

使用 JavaScript 检查 CSS 继承树

考虑一个带有 id 为“description”的 p 元素的网页：

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

<p>

当浏览器渲染此元素时，它将所有适用的 CSS 规则合并到单个继承树中。我们如何在纯 JavaScript 中复制这个，而不依赖浏览器插件？

解决方案：

为了检查应用于元素的 CSS 规则，我们可以遍历文档的样式表并匹配元素的选择器。下面是一个跨浏览器 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(document.getElementById('description')) 返回应用于元素的 CSS 规则字符串数组，在本例中：

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

此功能允许开发人员访问计算的 CSS 规则源，帮助调试和理解网页样式。

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