Alex Rivera | Logout

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

Asked 2010-11-29T19:46:10.230
19

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

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.

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

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

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

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

jquery css
Edit
Report

1 Answer

3

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.');
});
answered 2010-11-29T19:52:29.217

Your Answer