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 <kalli...@gmail.com> 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 <kalli...@gmail.com> 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

Reply via email to