Woops, my bad. I forgot to check it in IE.
Danny Wachsstock wrote:
>
> 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#a9191473
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
