如何使用纯 JavaScript 获取应用于元素的所有 CSS 规则？

在 JavaScript 中查找特定于元素的 CSS 规则

在 Web 开发中，了解应用于元素的 CSS 规则对于微调至关重要它的外观和行为。依靠 Firebug 或 WebKit Inspector 等开发人员工具可以深入了解影响元素渲染的已编译 CSS 规则。然而，在没有额外插件的情况下在纯 JavaScript 中复制此功能是一个挑战。

为了解决这一挑战，让我们深入研究实现此任务的 JavaScript 函数。该函数恰如其分地命名为 css，它采用 HTML 元素作为输入，并返回适用于该元素的 CSS 规则数组。

css 函数利用 matches 方法，该方法支持跨浏览器兼容性。它迭代文档中的样式表，检查这些样式表中的每个 CSS 规则。如果元素的选择器与规则的选择器文本匹配，则该规则的 CSS 文本将添加到数组中。

例如，考虑以下 CSS 和 HTML：

p { color: red; }
#description { font-size: 20px; }

<p></p>

调用css(document.getElementById('description')) 将返回一个包含以下两个 CSS 规则的数组：

p { color :red; }
#description { font-size: 20px; }

通过分析此数组，开发人员可以确定影响元素的特定 CSS 属性的来源，并做出进行相应调整。 JSFiddle (http://jsfiddle.net/HP326/6/) 上提供的 css 函数提供了一个全面的解决方案，用于识别在纯 JavaScript 中塑造元素外观的 CSS 规则，使开发人员能够在自己的应用程序中利用浏览器渲染功能.

以上是如何使用纯 JavaScript 获取应用于元素的所有 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！