是否将所有CSS规则解析为来自JavaScript的内存中文档的内联样式？

Question

我知道我可以使用window.getComputedStyle(el)来获取浏览器DOM中元素的计算样式。

但是，是否存在与名称document.resolveAllClassRulesToInlineStyles()更接近的东西，从而允许我执行JavaScript memory中文档的名称所暗示的操作。

输入：

​

.warning {
  color: red;
}

<html>
  <div style="color: blue;">Blue</div>
  <div class="warning">Red</div>
</html>

​

输出：

​

<html>
  <div style="color: blue;">Blue</div>
  <div style="color: red;">Red</div>
</html>

​

Answer 1

我认为JS很难为html做内联风格。

但是你可以尝试这些在线工具来做同样的事情。

Premailer.io

Campaign Monitor CSS Inliner

Responsive Email CSS Inliner

Mailchimp CSS Inliner Tool

<!-- 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>

Answer 2

下面是两个包，它们实现了OP所要求的功能

https://www.npmjs.com/package/juice

https://www.npmjs.com/package/inline-css