Сделайте стиль встроенным, используя jQuery - PullRequest
Новая
       23

Сделайте стиль встроенным, используя jQuery

2 голосов
/ 27 сентября 2011

Я экспериментирую с настройкой автоматического способа преобразования чистых дизайнов на основе таблиц стилей в некрасивый встроенный дизайн (для редактора новостной рассылки).

Возможно ли получить все стили, применимые к элементу (div, p, span, h1, h2 и т. д.) и применить их к этому элементу как встроенные?

Поэтому вместо того, чтобы мой стиль был красивым и красивым, как в таблице стилей: 

#topHeader { color: #222; background: red; width: 210px; height: 110px;}

Чтобы он был встроенным, как это: 

<div id="topHeader" style="color: #222; background: red; width: 210px; height: 110px;">

Если кто-нибудь знает, возможно ли это вообще, пожалуйста, пришлите мне правильное направление, если можете.

В любом случае, спасибо:)

Ответы [ 4 ]

0 голосов
/ 25 октября 2013

Я использовал следующее с умеренным успехом: 

$('#parentidhere').find('*').each(function (i, elem){elem.style.cssText=document.defaultView.getComputedStyle(elem,"").cssText;});

Некоторые стили, такие как селекторы фона, для более сложных стилей, кажется, все еще исчезают, хотя я до сих пор не могу понять, почему.Также это не будет работать в старых браузерах, но в моем случае это не имеет значения.

0 голосов
/ 27 сентября 2011

Вы можете сделать это, используя элемент .style элемента DOM, на который вы ссылаетесь. Используя ваш пример, может быть что-то вроде этого (не проверено): 

var el     = document.getElementById('topHeader');
var styles = new Array();

for (var key in el.style) {
    // You'll probably need to do some more conditional work here...
    if (el.style[key]) {
        styles.push(key + ': ' + el.style[key]);
    }
}

el.setAttribute('style', styles.join('; '));
0 голосов
/ 27 сентября 2011

Вы можете выполнить итерации таблиц стилей и правил документа: 

$.each(document.styleSheets, function() {
    $.each(this.cssRules || this.rules, function() {
        var style = {};
        var styles = this.cssText.split(/;\s*/g);
        $.each(styles, function() {
            var parts = styles.split(/\:\s*/g);
            style[parts[0]] = parts[1];
        });
        $(this.selectorText).css(style);
    });
});

Не все браузеры предоставляют .selectorText, а .cssText потребует анализа, специфичного для браузера. Надеюсь, этого достаточно, чтобы указать вам правильное направление.

0 голосов
/ 27 сентября 2011

Вам может быть интересно:

...