将所有 CSS 规则解析为 JavaScript 中内存文档的内联样式？
[英]Resolve all CSS rules to inline styles for in-memory document from JavaScript?
问题描述
I know that I can use window.getComputedStyle(el) to get the computed style of an element in the browser DOM.
我知道我可以使用window.getComputedStyle(el)来获取浏览器 DOM 中元素的计算样式。
But does anything exist that would closer match the name document.resolveAllClassRulesToInlineStyles() that would allow me to do what the name implies for an in JavaScript memory document.但是，是否存在任何与名称document.resolveAllClassRulesToInlineStyles()更匹配的东西，这将允许我按照名称对 JavaScript 内存文档进行操作。
Input:输入：
.warning { color: red; }
<html> <div style="color: blue;">Blue</div> <div class="warning">Red</div> </html>
Output:输出：
<html> <div style="color: blue;">Blue</div> <div style="color: red;">Red</div> </html>
2 个解决方案
解决方案1
1 2020-03-25 03:52:41
I think JS is hard to do the inline style for html.我认为 JS 很难为 html 做内联样式。
But you can try those online tools to do the same thing.但是您可以尝试使用这些在线工具来做同样的事情。
Campaign Monitor CSS Inliner活动监视器 CSS 内联
Responsive Email CSS Inliner响应式电子邮件 CSS 内联
Mailchimp CSS Inliner Tool Mailchimp CSS 内联工具
<!-- Test Example -->
<html>
<div style="color: blue;">Blue</div>
<div class="warning">Red</div>
</html>
<style>
.warning {
color: red;
}
</style>
<!-- Output -->
<html>
<div style="color: blue;">Blue</div>
<div class="warning" style="color: red;">Red</div>
</html>
<style>
.warning {
color: red;
}
</style>
解决方案2
0 2020-03-25 21:15:08
Here are two packages that do what OP asks about这里有两个包可以满足 OP 的要求
https://www.npmjs.com/package/juice https://www.npmjs.com/package/juice
https://www.npmjs.com/package/inline-css https://www.npmjs.com/package/inline-css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.