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

Question

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

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

我最后的手段是使用一些 css-inliner，例如juicejs，然后我可以访问 element.style.prop，但我认为如果这些 js 内联程序可以将 css 规则转换为内联 css，那么他们必须已经沿途提取了 css 规则? 我试图查看它的源代码，但如果有任何模块可以完成这项工作，那比尝试从该库中提取代码要好得多。

Answer 1

令我惊讶的是，这个问题没有很多可用的解决方案。 我最终找到了两个都有效的解决方案（可能有一些边缘情况，但我还没有遇到过）

选项 1：在此处发布的 getMatchedCSSRules 实现： https : //stackoverflow.com/a/37958301/821517

优点：短小精悍

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

选项 2：这里提到的一个名为 CSSUtilities 的非常全的库： https ://stackoverflow.com/a/12023174/821517

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

缺点：非常非常古老的库，它依赖于另一个已弃用的库。

---

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

1. 新文件： https : //gist.github.com/yellow1912/c9dbbab97497ec42489be55e8abe73c7
2. 请确保您访问此链接以下载包含文档文件的包：http ://www.brothercake.com/site/resources/scripts/cssutilities/