Hi, I found this thread when searching on this subject. I have an app here where we let the user customize almost every single piece of the UI. This requires that we dynamically generate the CSS off a tagged template.
What I want to be able to do is completely scrap the current style data and replace it with a new copy. So far everything I have tried has not worked. This solution looks great except that the style data could get very big if the user decides to make many changes to UI settings. So I am looking for something like this, but does a replace as opposed to just an append. Suggestions will be greatly appreciated. Thanks. Ricardo Tomasi wrote: > appendChild on a <style> element fails on IE and you get an "unknown > error" if you try to modify it's innerHTML. I haven't found any > workaround. > > Use this to add styles: > > //addStyles 0.1 > // Ricardo Tomasi < ricardobeat at gmail com > > // Licensed under the WTFPL - http://sam.zoy.org/wtfpl/ > function addStyles(rule){ > var sheet = document.styleSheets[0], > ln = (sheet.cssRules||sheet.rules).length; > if (sheet.addRule) { > rule = rule.match(/(.*){(.*)}/); > sheet.addRule(rule[1],rule[2], ln); > } else { > sheet.insertRule(rule, ln); > }; > return arguments.callee; > }; > addStyle("#div{display:none}"); > > the 'return arguments.callee' line is there to allow for some funky > construction, you can remove it if you want: > > addStyle > ('div { background: xxx }') > ('.menu { whatever: #45 }') > ('.hold { float: left }') > > This script will insert rules at the end of the stylesheet, that's > important so that you can override earlier styles. > > cheers, > - ricardo > > On Jan 15, 8:07 am, Ant <[email protected]> wrote: > >> Hi, >> Yea, I went for adding a new style element for every new style, which >> works, but isn't as neat as I was hoping for. >> I was trying to append a string into the style element: >> HTML >> <style type="text/css"> >> body{color:#333;} >> </style> >> JS >> $("style").append("#content{color:#f00;}"); >> In Firefox, this adds #content(color:#f00;} beneath the body >> declaration. >> Which is what I would expect to happen. >> In IE I get an error thrown in jquery-1.3b2.js >> >> It may well be that my expectations of append are wrong, if so, it >> would be a useful thing for me to know as I am quite new to jQuery. >> Many thanks for your time, >> Ant >> >> Ricardo Tomasi wrote: >> >>> What are you trying to append? You can only append textnodes to a >>> style element. >>> >>> Why not use the stylesheet object directly: >>> >>> document.styleSheets[0].insertRule("#wrapper {display:none}", 0) // >>> 'addRule' on IE >>> >>> Or, for a hassle-free alternative, create a new style element for it: >>> >>> $('<style type="text/css"></style>').text(myClass).appendTo('head'); >>> >>> On Jan 14, 12:05 pm, Ant <[email protected]> wrote: >>> >>>> Hi, >>>> I am trying to append css into a pre existing style element. >>>> $("style").append(myClass); >>>> This works as expected in Firefox, but not IE. >>>> The HTML on the page validates to HTML strict, so I'm fairly sure that >>>> it's not the issue with IE that append() won't work on incorrectly >>>> written elements. >>>> If I change my code to $("p").append(myClass); it works as expected. >>>> >>>> Was just wondering if this is a know issue with IE or jQuery and if >>>> anyone had a work around, I am out of ideas that don't involve >>>> considerable effort :) >>>> >>>> Thanks, >>>> Ant >>>> > >
