[Css] 如何快速的将行内样式抽出整理为内联样式 ?

• Z时代
• 2024-01-10
• 分类：技术分享

刚刚扒了个站，发现全是行内样式呢，有没有什么方法（插件/库/或者工具等） 能将行内样式抽出整理为内联样式呢 （Class名不限)？

搜索关键词 :

• 如何将行内样式抽出为内联样式？
• 如何使用javascript擦除所有内联样式并仅保留css样式表中指定的样式？
• 从HTML中提取内联CSS并净化页面。

回答

很多，比如 inline-css。

不过除了 email，我觉得这种功能用处不大。

写了个JS [狗头]

var stys = []
var linCss = ''
$('#app *').each((index,elem) => {
  var sty = $(elem).attr('style')
  sty = sty ? sty.trim() : ''
  if(stys.indexOf(sty) !== -1) {
    //   
  }else{
    stys.push(sty)
  }
  $(elem)
    .addClass(`elem-${stys.indexOf(sty)}`)
    .attr('style', '')
})
stys.forEach((sty, ind) => {
    linCss += `.elem-${ind} {${sty}} \n`
});
console.log(linCss);

操作步骤 :

• 为 body 元素添加id值： app
• 将代码粘贴到控制台运行
• 运行代码后页面样式错乱, 莫担心这是因为元素的行内样式被设置为空了
• 复制控制台输出的样式字符串, 在html的head标签中新增style标签并粘贴其中
• end

以上是 [Css] 如何快速的将行内样式抽出整理为内联样式 ? 的全部内容， 来源链接： utcz.com/a/37229.html