javascript - 使用javascript在按下按钮时将外部CSS转换为内联

Question

我目前正在开发一个需要在屏幕上显示并作为 HTML 电子邮件发送的页面。

我像往常一样在单独的(外部)CSS 文件中创建了所有样式。

此页面有多个不同的模板，所有模板都共享使用 CSS 样式化的相同类，这使得手动内联所有 CSS 成为一项相当漫长而乏味的工作。

我想知道是否有一种方法可以自动获取 css 并将其转换为内联。

我也做了一些研究和一些代码测试。

这是我得到的结果:

• 我可以使用 GET 请求获取 css
• 我清理了页面的 HTML(删除了所有不需要的部分)

现在我想在 css 和 html 中找到类时自动内联属性。

我在这里做了这个尝试https://codepen.io/NickHG/pen/wqyzGj?editors=1010

var classMatches, cls, css, cssRule, el, html, i, j, k, l, len, len1, len2, len3, len4, len5, listOfClasses, m, n, o, parsedCss, parsedHtml, parser, ref, res, v;

css = ".inside1{background:red;}.inside2{background:purple;}";

parser = new cssjs();

parsedCss = parser.parseCSS(css);

html = $('.outside').html();

parsedHtml = $.parseHTML(html);

listOfClasses = [];

for (k = i = 0, len = parsedHtml.length; i < len; k = ++i) {
  v = parsedHtml[k];
  listOfClasses.push(v.className);
}

classMatches = [];

for (k = j = 0, len1 = parsedCss.length; j < len1; k = ++j) {
  v = parsedCss[k];
  for (l = 0, len2 = listOfClasses.length; l < len2; l++) {
    cls = listOfClasses[l];
    if ("." + cls === v.selector) {
      console.log("matching class - ", v.selector);
      ref = v.rules;
      for (m = 0, len3 = ref.length; m < len3; m++) {
        cssRule = ref[m];
        res = cssRule.directive + ':' + cssRule.value + ';';
        classMatches.push({
          "class": cls,
          css: res
        });
      }
    }
  }
}

console.log(classMatches);

for (k = n = 0, len4 = parsedHtml.length; n < len4; k = ++n) {
  v = parsedHtml[k];
  debugger;
  for (o = 0, len5 = classMatches.length; o < len5; o++) {
    el = classMatches[o];
    if (v.className === el["class"]) {
      if (v.attributes['style'] != null) {
        v.attributes['style'].value = el.css;
      }
    }
  }
}

$('.outside').html(parsedHtml);

(以上代码是CoffeeScript的编译版)

但它不能正常工作，而且它也应该是递归的，因为我也有一些嵌套元素，所以我更愿意使用已经存在的库(如果存在)，而不是必须自己编写。

有什么想法/建议吗？

谢谢

Answer 1

最后，如果有人感兴趣，我稍微更改了模板，以便只使用一个模板并显示/隐藏必需/不需要的部分。

这使它更简洁，更易于编辑。然后我使用 ng-style(是的，我使用的是 angular)内联应用样式。

基本上我在范围对象中创建了我所有的样式，并在模板中以这种方式使用它:

$scope.style = {
   class1: {background:"red"},
   class2: {background:"yellow"}
}

<div ng-style="style.class1">...</div>
<div ng-style="style.class2">...</div>

我不喜欢这种方法，但它有效，至少让我在需要编辑/更改它时将所有样式保留在一个地方。