Копирование CSS во встроенный режим с помощью jquery (или сохранение форматирования при копировании материалов с веб-страницы)

Question

Я мог бы, вероятно, разобраться в коде для этого, но прежде чем я решил, я бы спросил, есть ли быстрый и / или встроенный способ или плагин для этого ...

Учитывая таблицу с примененным к ней классом css, определение класса находится во внешней таблице стилей (со стилями, примененными к th, tr и td). Я хочу переместить ИЛИ скопировать этот css в атрибут style тегов. самих себя. Другими словами, я хочу сделать CSS встроенным.

Причина: люди, которые используют эти страницы, иногда копируют и вставляют таблицы в электронные письма. Если они делают это на таблице с CSS из внешних источников, вставленная таблица теряет все форматирование. Если CSS встроен, форматирование сохраняется.

Я уже сделал это грубо и готово, просто применив дублированный css к таблице с помощью функции $().css();, но это не идеально. Если бы я когда-либо изменил CSS в таблице стилей, мне также пришлось бы изменить CSS в этой части на каждой отдельной странице с этим стилем таблицы

Что-то вроде $('.mytable').makeCSSInline(); было бы идеальной функцией - если бы она существовала:)

edit: просто для пояснения: я не думаю, что копирование / вставка сохранит CSS, если оно находится во внутренней таблице стилей (скопировано с использованием функции .load). Оно должно быть полностью встроенным (в атрибуте style каждого тега, с которым связан стиль).

Кроме того, я копирую из Firefox в Outlook (то есть из не-Microsoft в Microsoft)

Answer 1

Это не совсем идеально, но я думаю, что это довольно близко к тому, что вы ищете.

(function($) {
    $.extend($.fn, {
        makeCssInline: function() {
            this.each(function(idx, el) {
                var style = el.style;
                var properties = [];
                for(var property in style) { 
                    if($(this).css(property)) {
                        properties.push(property + ':' + $(this).css(property));
                    }
                }
                this.style.cssText = properties.join(';');
                $(this).children().makeCssInline();
            });
        }
    });
}(jQuery));

Тогда вы просто позвоните по этому номеру:

$('.selector').makeCssInline();

Answer 2

У меня была та же проблема, я хотел получить все css для совместимости с электронной почтой, я нашел отличный плагин jQuery

https://github.com/Karl33to/jquery.inlineStyler

Я знаю, что уже немного поздно для этого вопроса, но это очень простое решение.

$('.mytable').inlineStyler();

Надеюсь, это поможет

Answer 3

Я бы сделал jquery load () и выгрузил бы его в тег стиля

$("style").load("css/site.css", function() {
    alert('Load was performed.');
});

или если вы не хотите иметь пустой тег style для заполнения, вы можете сделать это:

$("head").append("<style></style>");
$("head style:last").load("<%=ResolveUrl("~/") %>_res/c/site.css", function() {
   alert('Load was performed.');
});

Answer 4

В Mailchimp есть онлайн-инструмент для этого:

http://templates.mailchimp.com/resources/inline-css/

Просто вставьте свой HTML-код с CSS в голову, и он выплюнет его встроенными стилями.

Answer 5

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

1. это предполагает, что у нас есть все наши стили CSS во внешнем файле, который имеет идентификатор "# main-css-file".
2. объявление! Важный не действует: такие правила обрабатываются так же, как и обычные.
3. алгоритм следующий: а) сохранить существующие встроенные стили, если они существуют; б) применять внешние правила CSS; в) восстановить сохраненные встроенные стили.

Вот и мы:

var content = $('#selector');

// preserve existing inline styles
content.find('[style]').each( function() {
    var that = $(this);
    that.attr( 'data-inline-css', that.attr('style') );
});

// get external css rules and iterate over all of them
var extCssFile  = $('#main-css-file')[0].sheet,
    extCssRules = extCssFile.cssRules;
for ( var i = 0; i < extCssRules.length; i++ ) {
    var extCssRule     = extCssRules[i].cssText,
        extCssSelector = $.trim( extCssRule.substring( 0, extCssRule.indexOf('{') ) ),
        extCssProps    = $.trim( extCssRule.substring( extCssRule.indexOf('{') + 1, extCssRule.indexOf('}') ) );

    // we omit all rules, containing useless/unsupported pseudo classes
    // and also make sure,that we have at least 1 element, matching current selector
    if ( extCssSelector.indexOf(':after') == -1 &&
        extCssSelector.indexOf(':before') == -1 &&
        content.find( extCssSelector ).length
    ) {

        // create array of css properties
        extCssProps = extCssProps.split(';');
        // remove the last array item, if it's empty
        if ( $.trim( extCssProps[ extCssProps.length - 1 ] ) == '' ) {
            extCssProps.pop();
        }

        // iterate over each tag withing content
        content.find( extCssSelector ).each( function() {
            var that = $(this);
            // add css from file
            for ( var a = 0; a < extCssProps.length; a++ ) {
                // split rule on ":", but not on "://", that is a part of url protocol
                var style = extCssProps[a].split(/:(?!\/\/)/),
                    prop  = $.trim( style[0] ),
                    val   = $.trim( style[1] );
                // jQuery doesn't understand css "!important" - remove it
                if ( val.indexOf('important') != -1 ) {
                    val = $.trim( val.replace( '!', '' ).replace( 'important', '' ) );
                }
                that.css( prop, val );
            }
        });
    }
}

// restore inline css, that already existed before applying external css
content.find('[data-inline-css]').each( function() {
    var that = $(this),
        inlCssProps = that.attr('data-inline-css').split(';');
    if ( $.trim( inlCssProps[ inlCssProps.length - 1 ] ) == '' ) {
        inlCssProps.pop();
    }
    for ( var i = 0; i < inlCssProps.length; i++ ) {
        var style = inlCssProps[i].split(/:(?!\/\/)/),
            prop  = $.trim( style[0] ),
            val   = $.trim( style[1] );
        that.css( prop, val );
    }
    that.removeAttr('data-inline-css');
});

Answer 6

Используйте простой JavaScript для этого:

$('.mytable').style.cssText;

Добро пожаловать;]

пс.то же самое для добавления встроенного CSS:

$('.mytable').style.cssText = "border:1px solid red;";