Question

我可能会为此代码混淆，但在此之前，我想我会问这是否有快速和/或内置方式或插件...

给定一个应用了css类的表，类定义在外部样式表中（样式应用于th，tr和td）我想移动或将该css复制到标签的style属性他们自己。换句话说，我想让CSS内联。

原因：使用这些网页的用户有时会将表格复制并粘贴到电子邮件中。如果他们在具有外部源CSS的表上执行此操作，则粘贴的表将丢失所有格式。如果css是内联的，则保留格式。

我已经通过简单地使用$().css();函数将重复的css应用到表中，以粗略和准备的方式完成了这项工作，但这并不理想。如果我在样式表中更改了css，我还必须在每个具有此样式表格的页面上更改此部分中的CSS

像$('.mytable').makeCSSInline();之类的东西将是一个理想的功能 - 如果它存在：）

编辑：只是为了澄清：我不认为复制/粘贴将保留css，如果它在内部样式表中（使用.load函数复制）..它必须是完全内联的（在样式属性中）每个标记都有与之关联的样式。）

另外，我正在从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 inline的电子邮件兼容性，我发现了一个很棒的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/

只需将CSS粘贴在头部的CSS中，它就会使用内联样式将其吐出。

Answer 5

使用纯JavaScript：

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

您的欢迎;]

PS。添加内联css相同：

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

Answer 6

我发现的所有解决方案对我来说都不够好。这是我自己的。使用此功能时，请注意以下事项：

这假设我们将所有css样式都放在外部文件中，该文件具有id＆＃34; #main-css-file＆＃34;。
声明！重要没有效果：这些规则的处理方式与普通规则相同。
算法如下：a）保存现有的内联样式（如果存在）; b）应用外部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'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');
});

使用jquery将CSS复制到内联（或在从网页复制内容时保留格式）

6 个答案: