Copying CSS to inline using jquery (or retaining formatting when copying stuff from a web page)

Question

I could probably muddle through the code for this, but before I do I thought I\'d ask if there\'s a quick and/or built-in way or plugin for this...

Given a table wit

Answer 1

This isn't exactly perfect but I think it's pretty close to what you're looking for.

(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));

Then you'd just call it with:

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

Answer 2

All solutions, that I've found, was not good enough for me. Here's my own one. When using this, please keep in mind the following:

1. this presumes, that we have all our css styles in an external file, that has an id "#main-css-file".
2. declaration !important has no effect: such rules are processed in the same way with ordinary ones.
3. the algorithm is the following: a) save existing inline styles, if they exist; b) apply external css rules; c) restore saved inline styles.

Here we go:

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 3

Use plain JavaScript for this :

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

Your welcome ;]

ps. same for adding inline css:

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

Answer 4

I had the same problem, I wanted to get all css inline for email compatibility, I found a great jQuery plugin

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

I know it's a bit late for this question, but it's a very easy solution.

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

Hope it might help

Answer 5

Mailchimp has an online tool for this:

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

Just paste in your HTML with CSS in the head and it will spit it out with inline styles.

Answer 6

I would do a jquery load() and dump it into a style tag

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

or if you don't want to have to have an empty style tag to populate you can do this:

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