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

前端之家收集整理的这篇文章主要介绍了使用jquery将CSS复制到内联(或从网页复制内容时保留格式)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我可能会混淆这个代码,但在我以前我会问,是否有一个快速和/或内置的方式或插件为此…

给定一个应用了css类的表,类定义在外部样式表中(将样式应用于th,tr和td)我想移动或将该CSS复制到标签本身的style属性。换句话说,我想使CSS内联。

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

我已经通过使用$()css()简单地将重复的CSS应用于表来完成这个工作。功能,但这并不理想。如果我更改了样式表中的CSS,我也必须在每个具有此样式表的每个页面上更改此部分中的CSS

像$(‘。mytable’)这样的东西makeCSSInline();将是一个理想的功能 – 如果存在:)

编辑:只是为了澄清:我不认为复制/粘贴将保留css,如果它在内部样式表(使用.load函数复制)..它必须是完全内联的(在每个标签的style属性它具有与之相关的风格)。

另外,我从firefox复制到outlook(所以从非微软到微软)

解决方法

这并不完全完美,但我认为这是非常接近你正在寻找的。
(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();

猜你在找的jQuery相关文章