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一起使用......但是你必须手动评估这种可能性......

Answer 2

编辑：感谢Kumar我意识到我建议的方法是非标准的，

getComputedStyle( element );

应该使用

，这有点难以使用和过滤，但有一个优点，就是只给出在评估CSS后实际应用于元素的最终规则（其中还包括默认的，未明确声明的样式），在这种情况下使用起来有点棘手）。

getMatchedCSSRules( element );

只需使用这个vanilla javascript函数。它完全符合你的要求。我会解释一下，如果有什么东西需要解释，那就不是函数的名称所暗示的。

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

2 个答案: