如何查找 JavaScript 中应用于元素的 CSS 规则的起源？

查找应用于元素的 CSS 规则的起源

当浏览器渲染网页时，它会从各种样式表编译 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 规则的数组。例如，调用 css(document.getElementById('elementId')) 将提供一个数组，其中每个元素代表应用于指定元素的 CSS 规则。

通过利用此解决方案，开发人员可以深入了解源代码CSS 规则并更有效地管理元素样式，无需依赖浏览器插件。

以上是如何查找 JavaScript 中应用于元素的 CSS 规则的起源？的详细内容。更多信息请关注PHP中文网其他相关文章！