[jQuery] Creating stylesheets in jQuery
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#a9176651
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/