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 discuss@jquery.com http://jquery.com/discuss/