检索元素适用的 CSS 规则
简介：
Web 浏览器将各种样式表中的 CSS 样式应用到元素来渲染它们。 Firebug 等工具公开此信息，显示每个元素的 CSS 继承树。本文阐述了如何在不使用浏览器插件的情况下在纯 JavaScript 中复制此功能。
解决方案：
要确定应用于元素的 CSS 规则：
以下是实现此解决方案的示例 JavaScript 代码：
function css(el) {
var sheets = document.styleSheets;
var 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('elementId'))。它将返回一个包含应用的 CSS 规则作为字符串的数组。
示例：
考虑此示例 HTML 和 CSS：
<style type="text/css">
p { color: red; }
#description { font-size: 20px; }
</style>
<p>调用css(document.getElementById('description')) 将生成一个包含两个的数组elements:
["p { color: red; }", "#description { font-size: 20px; }"]此函数提供了一种简单且跨浏览器兼容的方法来检索纯 JavaScript 中任何给定元素的适用 CSS 规则。
以上是如何以编程方式检索 JavaScript 中元素适用的 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！
