获取与元素关联的所有 CSS 规则
浏览器渲染涉及编译 CSS 规则并将其应用于特定元素。这个分层过程最终导致元素的最终外观，如 Firebug 等浏览器工具所示。然而，在没有额外插件的情况下访问这些计算的 CSS 规则需要纯 JavaScript 中的自定义解决方案。
解决方案：
要检索元素的 CSS 规则，我们可以利用 JavaScript 的DOM API 和 CSSRule 对象。以下代码片段提供了跨浏览器兼容的解决方案：
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'))。
示例：
考虑以下 HTML 和 CSS：
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p>调用 css(document.getElementById('description')) 将返回以下内容array:
[
"p { color: red; }",
"#description { font-size: 20px; }"
]此数组列出了应用于该元素的两个 CSS 规则，让您清楚地了解其最终外观。
以上是如何使用纯 JavaScript 检索应用于特定元素的所有 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！
