Динамически добавлять ссылочную таблицу стилей во встроенные стили

Question

Сценарий

Я создал страницу, на которой клиент может создавать свои собственные страницы, календари, виджеты, статьи и т. Д. Я создал вторую страницу динамического компоновщика, где он может создавать свои собственные информационные бюллетени.

Задача

Все мои css ссылаются на классы, потому что почтовые программы очень ограничены, я должен добавить все стили inline .

Вопрос

Есть ли скрипт, который я могу запустить, чтобы захватить все ссылочные стили через класс и добавить его в соответствующие элементы / теги inline-styles?

Пример [простой]

<p class='txtBlack'>Hello World</p>

Преобразует в

<p class='txtBlack' style='color:#000;'>Hello World</p>

Надеюсь, это достаточно ясно, чтобы понять.

Answer 1

Я бы использовал element.currentStyle и window.getComputedStyle() для каждого элемента, а затем «вручную» прочитал то, что я хочу, и переписал то, что, как я уверен, не работает в почтовых приложениях.

Я сделал пример здесь: http://jsfiddle.net/Vmc7L/

Другой способ - прочитать правила из таблиц стилей, а затем применить их к встроенному стилю. Но что, если у вас есть селекторы типа .myClass:firstChild>.anotherClass? : D Может быть, jquery может помочь.

Есть методы, которые вам нужны: http://www.quirksmode.org/dom/w3c_css.html

Answer 2

Этот ответ объясняет, как: Можно ли получить доступ к значению недействительных / пользовательских свойств CSS из JavaScript?

CSSStyleDeclaration (https://developer.mozilla.org/en/DOM/CSSStyleDeclaration)

div {
    width: 100px;
}

стиль: объект CSSStyleDeclaration содержит cssText:

cssText: "width: 100px"

Спецификация CSSStyleDeclaration: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

Чтобы получить все элементы с именами классов, используйте:

jQuery("[class]")

Answer 3

Вот решение, которое вы можете использовать javascript-функцией «getElementsByClassName» для сбора элементов с указанными именами классов. Но помните, что это не работает браузеры IE. Так что для IE у вас должна быть своя собственная функция. Надеюсь, это поможет вам.