如何仅使用 JavaScript 确定哪些 CSS 规则影响特定元素？

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

问题：

许多 Web 开发工具都提供基于以下条件选择元素的功能班级或 ID。但是，可以通过检查浏览器加载的原始 CSS 样式表来更深入地研究浏览器的渲染过程。 CSS 规则被编译并应用于来自多个样式表的元素，创建一个复杂的继承树。

问题：

我们如何在纯 JavaScript 中复制此功能而不依赖于附加浏览器插件？

示例：

对于给定元素，例如：

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

<p></p>

p#description 元素是受两个 CSS 规则影响：红色和字体大小20px。

答案：

功能：

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

用法：

calling css(document.getElementById('elementId')) 

该函数返回一个数组包含与传递的元素匹配的每个 CSS 规则。

以上是如何仅使用 JavaScript 确定哪些 CSS 规则影响特定元素？的详细内容。更多信息请关注PHP中文网其他相关文章！