Posted by Milo van der Leij on 18 January 2006

Actually, the error "Unexpected call to method or property access" seems to come from the line "styles.appendChild(newStyle)".

Trying to use innerHTML or innerText instead of appendChild causes an "Unknown runtime error."

Posted by Krijn Hoetmer on 19 January 2006

Off topic:

"I guess its getting confused between the head element <style> and the object property .style?"

<style> isn't escaped, which stops the page from rendering in Opera (and IE)..

Posted by Ross Howard on 20 January 2006

I'm not sure what you mean. isn't escaped?

It renders fine in opera for me...

Posted by Krijn Hoetmer on 20 January 2006

http://validator.w3.org/check?uri=http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html

Posted by Nick Fitzsimons on 24 January 2006

I would argue that your code is not manipulating the DOM correctly: you should be using createComment, rather than putting the comment syntax inline in your createTextNode call; then add the textNode containing the CSS to the comment. See http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-core.html#ID-1334481328

Posted by Tino Zijdel on 24 January 2006

Nick: I'd say the comment-tags are completely unnecessary. In an XHTML-environment you certainly don't want to put HTML-comments around styles or scripts. It's an old-school habbit that ought to be forgotten.

Posted by Nick Fitzsimons on 24 January 2006

Tino: I'd tend to agree with you. In addition, when the text node is created the browser is potentially going to be forced to convert it into a comment node when it's appended to the DOM tree. A quick look with Firefox's DOM Inspector and MS's Script Editor debugger suggests that's not what's actually happening, but the Script debugger shows that the error is with the line

styles.appendChild(newStyle);

and not with creating the "style" element.

Trying to create a "script" element and appending a text node (free of comment markup) to it causes the same error. Creating a "title" element and appending a textNode works, but gives a "Type mismatch" when appending it to the head.

I think this one could do with deeper exploration... it's something horrible to do with COM, I think.

Posted by David Chan on 1 February 2006

I got your example to work in IE6 by changing your createTextNode line to:

var newStyle = document.createTextNode('body { background-color: yellow; }');

Posted by David Chan on 1 February 2006

Nevermind. I had something wrong with my test setup. Disregard the last post.

Posted by Alex on 7 February 2006

The given script works absolutely fine for me on IE6SP2.

WRT to comments etc. for inserting style, I prefer to use the built in methods for adding style rules... they work fine in this example, which is designed to add css rules supplied in a div- this allows for adding CSS imformation from within the tag- e.g. if working from inside a PHP script where the head is inaccessible:

<div id=cssinfo>
body{background-color:#00f !important;}
a:hover{text-deocation:none;}
a{color:red;}
<div>
<script type="text/javascript">
rawsheet = document.getElementById("cssinfo");
newcss = document.createElement("style");
newcss.type="text/css";
newcss.media="all";
document.getElementsByTagName("head")[0].appendChild(newcss);
cssrules = rawsheet.innerHTML.split("}");
newcss = document.styleSheets[0];
if(newcss.rules) { //IE
for(i=cssrules.length-2;i>=0;i--) {
newrule = cssrules[i].split("{");
newcss.addRule(newrule[0],newrule[1])
}
}
else if(newcss.cssRules) { //Firefox etc
for(i=cssrules.length-1;i>=0;i--) {
if (!/\s$/.test(cssrules[i])) newcss.insertRule(cssrules[i]+"}",0);
}
}
rawsheet.parentNode.removeChild(rawsheet);
</script>

If you feel real generous, test it in your browser!

Posted by Fredrik Johansson on 1 March 2006

This works for me, doesnt it work for you?

var cssStr = "div {color:blue;}";
var style = doc.createElement("style");
style.setAttribute("type", "text/css");
if(style.styleSheet){// IE
style.styleSheet.cssText = cssStr;
} else {// w3c
var cssText = doc.createTextNode(cssStr);
style.appendChild(cssText);
}

Regards
Fredrik Johansson

Posted by Jerome Devost on 23 March 2006

You get the same error if you want to add text to a 'script' node. Use this instead (in IE):
var oScript = document.createElement('script');
oScript.text = sScriptCode.