是否有将内联样式转换为 css 类的包

Question

如果我通过了有没有一个包

<p style="width: 500px; height: 500px"> Hello World </p>

将返回

<p class="foo"> Hello World </p>

.foo {
  width: 500px;
  height: 500px;
}

Answer 1

使用 JS 来做到这一点。用样式标签抓取所有元素

var els = document.querySelectorAll('[style]');

遍历所有元素，给它们一个随机的类，并在样式标签中添加语法

for (i = 0; i < els.length; i++) {
  var rndClass = getUniqueRandomClass();

  var style = els[i].style;
  var returnStyle = "." + rndClass + "{" + style + "}";
  document.querySelector('style').textContent += returnStyle;

  els[i].classList.add(rndClass);
  els[i].removeAttribute("style");
}