javascript - 如何使用客户端 javascript 将外部/内部 css 样式转换为内联样式属性

Question

例如，如果我在文档中包含 CSS:

div {
  color: red;
}
div.test {
  border: 1px solid blue;
}

和文档正文中的 html 标记:

<div id='demo'>
  <div class='test'>123</div>
  <div>456</div>
</div>

我想将 #demo 中的所有内容转换为包含标签的字符串以及它使用的所有样式，例如:

var parent = $('#demo');
var result = convertExternalInternalStylesToInline(parent);

// the desired result:
result = '<div style="color: red; border: 1px solid blue;">123</div>' +
         '<div style="color: red">456</div>'

我需要的是 convertExternalInternalStylesToInline 函数的内容，它会自动获取所有后代元素，应用计算/使用的样式，然后将 css 样式添加到这些元素，然后将其全部作为 html 字符串返回。

可以仅使用客户端 javascript 来完成吗？如果是，如何？

(我需要知道如何获取标签的所有计算/使用样式)

最小的例子:

function convertExternalInternalStylesToInline(parent) {
  var parent = $(parent).clone(); // clone it before modify, is this deep clone?
  parent.find('*').each(function(idx,el){ // fetch all children
     var el = $(el); // convert to jquery object
     // get all applied styles on this element
     // el.?                        // --> don't know how
     // apply css for each styles
     el.css( css_prop, css_style );
  });
  // return as string, maybe:
  return parent.html();
}

Answer 1

编辑:感谢 Winchestro，我查找了 window.getMatchedCSSRules 函数，它实际上只在 Webkit 中，并且有一个 discussion that it should be deprecated .

您实际上应该使用的是 window.getComputedStyle() Read the docs at MDN .

您可以查看的另一个非常有用的资源是 CSSUtilities set of libraries .

---

您需要的是两个独立的东西，一个是用于解析 CSS 对象模态 (CSSOM) 的库，另一个是将相关 CSS 应用于您的 DOM 元素。

我知道一个名为 Juice 的很好的 nodejs 库。 .

我发现了一个可能在前端工作的库，叫做 inlineresources , 它有一个浏览器构建

再三考虑，我认为您可能可以将 Juice 与 browserify 结合使用...但是您必须手动评估这种可能性...