Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS. This is particularly handy for modifying CSS styles that you want to remain persistent until a page is refreshed again.

Instructions:

Use the 'globalcss' function in the same way as the jQuery 'css' function. Eg:

$("some selector").globalcss("style","value");

Use the globalsetylesheet.print() function to return a string of the global stylesheet

Demo:

$("p").globalcss("color","red");

How it works:

This plugin creates a stylesheet and appends it to the head of the page. The document.styleSheets object is used to reference the new stylesheet, and add styles to it. References to new styles are cached in an associative array, which uses the CSS selector query as the key, to help with performance (rather than searching through the document.styleSheets object).

Requirements:

This plugin requires jquery 1.3.1 or above, unless I figure out how to access the jQuery.selector variable in older versions.

Download:

jquery.globalstylesheet.js - version 0.1

Test it out and let me know what you think:

I havn't done much cross-browser testing yet. Feel free to test it out and let me know of issues that arise.

Thanks to hunlock.com for a blog that helped me understand how use the document.styleSheets object.