You could also do $("style").html("p{color:green;}"); if you wanted a
non-inline style rule applied to the page.
Danny Wachsstock wrote:
>
> This may be helpful to someone: I made a jQuery extension that lets you
> change the stylesheet styles, rather than the inline styles (which is what
> jQuery generally does). So you can do:
>
> $.style('p').css('color','green');
>
> creates a stylesheet with a rule that sets the color of P elements,
> including any that are created in the future. That's different from
> $('p').css('color','green'); which changes the color of any existing P
> elements only.
>
> It also takes an options object that can specify the media of the
> stylesheet, so:
>
> $.style('div', {media: 'print'}).css('background', 'none');
>
> sets the background only for printing.
>
> Some notes:
> --The selector can only be something that your browser understands; no
> XPath or CSS3 or other fancy jQuery stuff.
> --The returned object is not a real jQuery object but an array of CSS
> rules; most of the jQuery functions will give errors. The only useful
> function that works is .css(), and that only to set the style;
> $.style('p').css('color') gives an error. There ought to be a way to get
> the style, but I haven't found it yet.
> --For large numbers of elements, it ought to be faster to change the
> stylesheet than to change the style of each element, but I haven't tested
> that yet.
>
> The code:
>
> $.style = function(selector, options){
> options = $.extend ({type: 'text/css', media: 'all'}, options);
> var style =
> $(document.createElement('style')).attr(options).appendTo('head')[0];
> if (style.styleSheet){
> // IE
> var sheet = style.styleSheet;
> sheet.addRule(selector, null);
> return $(sheet.rules[0]);
> }else if (style.sheet){
> // Firefox
> sheet = style.sheet;
> sheet.insertRule(selector+' {}',0);
> return $(sheet.cssRules[0]);
> }
> };
>
> This creates a new stylesheet (really a <STYLE> element) each time it's
> called. A fancier version that caches the stylesheets is:
>
> $.style = function (selector, options){
> options = $.extend ({type: 'text/css', media: 'all'}, options);
> var sheet = $.style.sheets[options.media];
> if (!sheet){
> var style =
> $(document.createElement('style')).attr(options).appendTo('head')[0];
> if (style.styleSheet){
> // IE
> $.style.sheets[options.media] = sheet = style.styleSheet;
> }else if (style.sheet){
> // Firefox
> $.style.sheets[options.media] = sheet = style.sheet;
> sheet.rules = []; // lets us use the same rules array
> }
> }
> if (sheet.rules [selector]) return $(sheet.rules [selector]);
> if (sheet.cssRules){
> // Firefox
> sheet.insertRule(selector+' {}',sheet.cssRules.length);
> return $(sheet.rules[selector] =
> sheet.cssRules[sheet.cssRules.length-1]);
> }else{
> // IE
> sheet.addRule(selector, null);
> return $(sheet.rules[selector] = sheet.rules[sheet.rules.length-1]);
> }
> };
> $.style.sheets = [];
>
> Enjoy!
>
> Danny Wachsstock
>
--
View this message in context:
http://www.nabble.com/Creating-stylesheets-in-jQuery-tf3298905.html#a9184242
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
