GlobalStylesheet jQuery Plugin

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.

Post your comment

Comments

  • Ah, never mind. Found the problem in my own code. There was an additional whitespace in my selector which caused a comparison mismatch in the plugin code. Maybe the plugin could be improved by trimming the specified selector strings and by replacing multiple whitespace characters with a single one so the selector string always matches the one used by the browser internally.

    Posted by Klaus Reimer, 15/02/2012 10:56pm (3 months ago)

  • There is something wrong with this plugin. I can't set two different CSS definitions for the same selector. Example:

    $("#foo").globalcss("background", "red");
    $("#foo").globalcss("padding", "20px");

    This only sets the background color but not the padding. When I swap the lines then it only sets the padding but not the color.

    I think this code in the setRule() method is responsible for it:

    if(setrules[selector] != undefined){ return setrules[selector]; }

    So a second call with the same selector simply returns the cached rules and does nothing else. It works when I remove this code but I really don't understand what this "setrules" map is doing at all so I'm not sure how to fix it properly.

    Posted by Klaus Reimer, 15/02/2012 10:34pm (3 months ago)

  • Actually I take that back (the bit about Chrome dev tools, not the bit about Nice script :) The globalcss changes just don't show up on your currently selected element until you switch to another element and back again. It's listed as being applied by the page.

    Posted by Tim, 07/12/2011 1:31pm (5 months ago)

  • Nice script, do you also find that the applied styles don't show up in Chrom dev tools?

    Posted by Tim, 07/12/2011 12:22am (5 months ago)