如何解决从任何给定元素中提取CSS规则
我试图找到一种从任何给定元素中提取所有css规则的方法(我对html和css具有完全访问权限)。
我已经研究了其他解决方案,例如getComputedStyle,但是,它对于某些属性(例如宽度或高度)没有太大帮助。例如,我希望它返回宽度:100%(如果适用),但是它总是返回以px为单位的实际宽度值。我需要的是CSS规则定义,而不是它在浏览器中的实际呈现方式。
我的最后一招是使用某些css-inliner(例如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引擎一起使用。我在这里发布了这两个修改过的文件,希望对其他人有帮助(并且可以发现我的错误并提出修复建议)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。