That works for Firefox, which treats the cssText as a textNode but fails in
Internet Explorer.
Yansky wrote:
>
> 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#a9188673
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
