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

Ответ 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();

Ответ 2

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

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

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

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

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

Ответ 3

Я бы выполнил загрузку jquery() и сбросил ее в тег стиля

$("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.');
});

Ответ 4

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

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

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

Ответ 5

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

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

Ваш прием;]

пс. то же самое для добавления inline css:

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

Ответ 6

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

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

Здесь мы идем:

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 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');
});