使用jquery将CSS复制到内联（或从网页复制内容时保留格式） [英] Copying CSS to inline using jquery (or retaining formatting when copying stuff from a web page)

问题描述

我可能搞砸了这段代码，但在我之前，我想我会问如果有一个快速和/或内置的方式或插件为此...

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...

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

Given a table with a css class applied to it, the class definition being in an external style sheet (with styles applied to th, tr, and td) I want to move OR copy that css to the style attribute of the tags themselves. In other words I want to make the CSS inline.

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

Reason: People who use these pages sometimes copy and paste the tables into emails. If they do this on a table with externally-sourced CSS the pasted table has lost all formatting. If the css is inline the formatting is retained.

我已经通过简单地应用重复的css到表使用 $（）。css（）; 函数，但这不是理想的。如果我改变了样式表中的css，我也必须在每一个具有这种样式表格的单页上改变这个部分的CSS

I have already done this in a rough-and-ready way by simply applying duplicated css to the table using $().css(); function, but this is not ideal. If I ever changed the css in the style sheet I'd also have to change the CSS in this part on every single page that has this style of table

code> $（'。mytable'）。makeCSSInline（）; 将是一个理想的函数 - 如果存在：）

Something like $('.mytable').makeCSSInline(); would be an ideal function - if it existed :)

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

edit: Just for clarification: I don't think the copy/paste will retain the css if it's in an internal style sheet (copied using the .load function).. It has to be fully inline (in the style attribute of each tag that has a style associated with it).

此外，我从firefox复制到outlook（所以从非微软到微软）

Also, I'm copying from firefox to outlook (so from non-microsoft to microsoft)

推荐答案

这不是完美的，但我认为它非常接近你想要的。

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

然后你就可以调用它：

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

这篇关于使用jquery将CSS复制到内联（或从网页复制内容时保留格式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！