Как прослушать CSS на div с существующего сайта, чтобы добавить встроенный CSS к этому div?

Question

Я хотел бы прослушать CSS, который в настоящее время применяется к определенному div на моем веб-сайте, чтобы вставить встроенный стиль в этот div (подумайте об этом, как о вставке перед отправкой электронного письма, даже если это происходит до вставки в Word).

Мне хорошо известны инструменты для работы со встроенными инструментами, которые определяют стиль всей веб-страницы, и что я могу отправить всю веб-страницу таким инструментам (например, https://github.com/peterbe/premailer), но я бы хотел избегайте посылки всей страницы и последующего захвата div, если это возможно, потому что это кажется довольно варварским.

Любая идея о том, как захватить стиль в настоящее время применяется к элементу? Я открыт для предварительного и пост-рендеринга.

Если это уместно, это div внутри редактора FROALA, но useClass не используется, многие стили задаются не в классах, а непосредственно в стилях тегов dom:

a {
    color: ponytail's rainbow;
}

Answer 1

window.getComputedStyle(element[, pseudoElt]);

Метод window.getComputedStyle() возвращает объект, который сообщает значения всех свойств CSS элемента после применения активных таблиц стилей и разрешения любых базовых вычислений, которые могут содержать эти значения. Доступ к отдельным значениям свойств CSS осуществляется через API-интерфейсы, предоставляемые объектом, или просто индексируется с помощью имен свойств CSS.

Источник: 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";
  }
}

делает трюк