确定影响纯 JavaScript 中元素的所有 CSS 规则
在 Web 开发中，检查浏览器加载的原始样式表仅提供部分信息了解应用于元素的 CSS 规则。这是因为浏览器编译所有 CSS 规则并将它们应用到基于继承的元素，从而产生复杂的继承树，该树在样式表中不会立即显现出来。
对于寻求纯 JavaScript 解决方案来重现此功能的开发人员，检索在不依赖其他浏览器插件的情况下，计算影响元素的 CSS 规则的详细信息构成了重大挑战。不过，这里有一个全面的解决方案：
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 文本的数组。
为了说明其用法，请考虑以下内容HTML 和CSS:
HTML
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p>JavaScript
var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']在此示例中，该函数识别两个匹配的 CSS规则：为所有
指定红色。元素，另一个将 ID 为 #description 的元素的字体大小设置为 20 像素。
返回的数组允许通过引用 CSSRule 对象文档进一步探索每个规则的详细信息。这种方法提供了一种全面且与浏览器兼容的方法，用于提取应用于元素的计算 CSS 规则，而无需额外的插件，使开发人员能够深入检查和调试其样式。
以上是如何在纯 JavaScript 中检索影响元素的所有 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！
