如何将所有计算样式设置为元素上的文字样式？答案

【问题标题】：How to set all computed styles as literal styles on an element?如何将所有计算样式设置为元素上的文字样式？
【发布时间】：2018-12-05 09:55:25
【问题描述】：

这个问题与 SO 上的这个问题相似（我认为）：How to move all computed CSS styles from one element and apply them to a different element using JavaScript?

我想要做的是找到所有通过 css 表应用的样式，并在元素上显式设置（如使用 style= 属性）。我想这样做的原因是，如果我在那里打开它，MS Word (2010) 会选择样式

这是我的代码

var $this = $(this);
var styles = window.getComputedStyle(this, null);
$this.css(styles);

我也试过

var styles = document.defaultView.getComputedStyle(this, null);

当我在最后一行 ($this.css(styles) 周围放置一个 try catch 时，我收到一条错误消息“调用对象无效”。我不明白问题出在哪里

【问题讨论】：

A CSSStyleDeclaration 不是 jQuerys .css() 方法所期望的普通对象。
您能说明一下这样做的理由吗？
@KoshVery 我已在问题正文中添加了我的理由。这样样式就出现在 MS Word 2010 中
@Andreas 明白了。因此，如果您不能像我尝试的那样应用 CSSStyleDeclaration，这是否会使我引用的“类似”问题的答案不正确？
@KoshVery 澄清一下：在段落上设置的类出现在 MS Word 中。但是跨度上的类不是

标签： javascript jquery css styles

【解决方案1】：

好吧，以下 sn-p 可以满足您的需求，尽管我认为这不是您所需要的。 MS Word 不是浏览器，我不确定它是否支持所有样式或者 jQuery 是否可以在那里工作......

var $this = $('b');
var styles = window.getComputedStyle($this[0]);

$this.css(
  Object.values(styles).reduce(
    (a, e) => 0*(a[e] = styles[e]) || a, {}
  )
)

console.log(`style="${$this.attr('style')}"`)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b>I have styles</b>

【讨论】：

实际上，您对“我需要什么”是正确的。走开吃午饭，我意识到问题很可能出在我的 CSS 格式上……这就是它的本质！谢谢你回答我问的问题
@ControlAltDel，乐于助人！