Question

Firefox and Chrome let me create a <style> element and populate it, all from JavaScript. I could swear that in the past I’ve done that in IE (like, IE6), in different circumstances. But now I can’t get IE (7 or 8; haven’t tried 9) to let me set it at all.

I have this recollection of a “cssText” property, but now in the (mysteriously diminished; does anybody know what happened to the MSDN documentation site?) MSDN docs that only shows up as a part of the stylesheet API and not as a DOM element thing.

So: is it at all possible to create and populate a <style> element in Internet Explorer?

Here is a trivial jsfiddle example, with the following jQuery code:

$('head').append($('<style/>', { html: 'div { color: red; }' }));

Works fine in Firefox, Chrome, and Opera. (I guess I should try Android and iOS while I’m at it.)

edit — yes, I’ve tried setting “text” instead of “html”, and it doesn’t help. Trying to set “innerText” without jQuery also doesn’t work.

Answer 1

Here is how I’ve done this before. I’ve pretty much copied this straight out of some old code of mine, but if I remember correctly, the styleSheet property is only used by IE, and as you mentioned, that’s when you need to use cssText:

var styleElem = document.createElement("style");
styleElem.type = "text/css";
styleRules = document.createTextNode(".someClass { color: red; }");
if(styleElem.styleSheet) {
    styleElem.styleSheet.cssText = styleRules.nodeValue;
}
else {
    styleElem.appendChild(styleRules);
}
document.getElementsByTagName("head")[0].appendChild(styleElem);​

Here’s a working example (tested in latest Chrome and IE6).