如何从现有网站嗅探 div 上的 css 以向 div 添加内联 css？

Question

我想嗅探当前应用于我网站上某个 div 的 CSS，以便向该 div 插入内联样式（将其想象成在发送电子邮件之前内联，即使是在插入 Word 之前）。

我很清楚内联工具可以内联整个网页的样式，并且我可以将整个网页发送到类似的工具（例如 https://github.com/peterbe/premailer），但我想避免发送整个页面并在之后抓取 div，如果可能的话，因为它看起来很野蛮。

知道如何获取当前应用于元素的样式吗？我对预渲染和 post 渲染持开放态度。

如果相关，它是 FROALA 编辑器中的 div，但 useClass 是不行的，许多样式未在类中设置，而是直接在 dom 标签样式中设置:

a {
    color: ponytail's rainbow;
}

Answer 1

window.getComputedStyle(element[, pseudoElt]);

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

来源：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

将其与

相结合

var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";
  }
}

成功了

如何从现有网站嗅探 div 上的 css 以向 div 添加内联 css？

How to sniff css on div from existing website to add inline css to that div?

html

javascript

css

froala

angular