我正在尝试找到一种方法从任何给定元素中提取所有 css 规则(我可以完全访问 html 和 css)。
我研究了其他解决方案，例如 getComputedStyle，但是，它对某些属性(例如宽度或高度)没有太大帮助。例如，我希望它在适用时返回 width: 100%，但它总是返回以 px 为单位的实际宽度值。我需要的是 CSS 规则定义，而不是它在浏览器上实际呈现的方式。
我最后的手段是使用一些CSS内联器，例如juicejs，然后我可以访问element.style.prop，但我认为如果这些js内联器可以将CSS规则转换为内联CSS，那么它们一定已经提取了CSS规则已经在路上了吗？我试图研究它的源代码，但如果有任何模块可以完成这项工作，那么它会比尝试从该库中提取代码要好得多。
最佳答案
令我惊讶的是，这个问题没有太多可用的解决方案。我最终找到了两个都有效的解决方案(可能有一些边缘情况，但我还没有遇到)
选项 1:此处发布了 getMatchedCSSRules 实现: https://stackoverflow.com/a/37958301/821517
优点:简短明了
缺点:尚不支持伪选择器
选项 2:这里提到了一个名为 CSSUtilities 的非常全面的库: https://stackoverflow.com/a/12023174/821517
优点:它可以处理伪选择器
缺点:非常非常旧的库，依赖于另一个已弃用的库。
我最终使用了 CSSUtilities，并且我必须进行一些更改(修改)才能使其与新的 js 引擎一起工作。我在这里发布了两个修改后的文件，希望对其他人有帮助(并且可以发现我犯的错误并建议修复)
关于javascript - 从任何给定元素中提取 CSS 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64061149/