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（是的，我使用角度）来应用内联样式。

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

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

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

我不喜欢这种方法，但是如果我需要编辑/更改它，它至少可以让我将所有风格保存在一个地方。

使用javascript按钮将外部CSS转换为内联

1 个答案: