Javascript 从任何给定元素提取CSS规则

我试图找到一种从任何给定元素中提取所有css规则的方法（我完全可以访问html和css）

我已经研究了其他解决方案，例如getComputedStyle，但是，它对某些属性（例如宽度或高度）没有多大帮助。例如，我希望它返回width:100%（如果适用），但它总是返回px中的真实宽度值。我需要的是CSS规则定义，而不是它在浏览器上的实际呈现方式

---

我最后的办法是使用一些css内联程序，如juicejs，然后我可以访问element.style.prop，但我认为如果这些js内联程序可以将css规则转换为内联css，那么它们一定已经提取了css规则了？我试图查看它的源代码，但如果有任何模块在那里做这项工作，这将比试图从该库中提取代码要好得多。

我感到惊讶的是，对于这个问题没有太多的解决方案。最后，我找到了两个都有效的解决方案（可能有一些边缘情况，但我还没有遇到）

选项1:此处发布了getMatchedCSSRules实现：

优点：简洁

缺点：不支持伪选择器（尚未）

选项2:这里提到的一个名为CSSUtilities的非常全的库：

优点：它可以处理伪选择器

缺点：非常非常旧的库依赖于另一个不推荐使用的库

---

我最终使用了CSSUtilities，我不得不做一些修改（hacks），以使它能够与新的js引擎一起工作。我将这两个修改过的文件都发布在这里，希望它能帮助其他人（并且我犯的错误可以被发现并建议修复）

新文件：

请确保访问此链接下载包含文档文件的软件包：

---

这回答了你的问题吗？还是这个？这回答了你的问题吗？我正在测试您发送的所有解决方案，将立即回复。我想要的是传递元素对象并获取提取的css，我发现这一个非常接近我需要的内容，但它与新节点版本有一些问题，我正在检查我能做些什么：非常感谢创建该要点并更新它！官方网站上的下载链接被破坏了，如果丢失，那将是一件很遗憾的事情。我认为您可以跳过

Selector.js

，因为默认情况下

api

选项是

false

，所以浏览器将返回到自己的选择器api。过去，支持真正的旧浏览器需要这种功能，但现在已经不需要了。