将css转换为行内样式的方案css-inline

CSS.jpg

聊聊场景

  • 发送邮件
  • 在第三方网站中嵌入HTML
  • 从其他编辑器拷贝编辑好的文章发布到微信、今日头条等自媒体

在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变

解决方案

这两种方案功能和 Api 非常相似,这里就以 juice 为例

安装

npm i juice --save

使用

import juice from 'juice'
const html = `
<div class="test"><h1>测试Juice</h1></div>
<style>
div{
    width: 90%;
    height: 500px;
}
</style>
`
const result = juice(html)
console.log(result)

结果

<div style="width: 90%; height: 500px;"><h1>测试Juice</h1></div>

作者: 浪子
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 浪子 !