.myStyle { co...">
Geek Answers Handbook

Change the content of the <style> element using JavaScript

Problem

I have the following code:

 <html> <head> <style id="ID_Style"> .myStyle { color : #FF0000 ; } </style> </head> <body> <p class="myStyle"> Hello World ! </p> </body> </html>

And I want to change the contents of <style> via JavaScript.

Expected Solution

The first solution was to use the innerHTML property of the style element (extracted through its identifier), but while it works in Firefox, it fails in Internet Explorer 7.

So, I used pure DOM methods, i.e. created an element called style, the text node with the desired content, and added the text node as a child of the node style, etc. does not work.

According to MSDN, the <style> element has an innerHTML property, and according to W3C, the <style> element is an HTMLStyleElement element that comes from an HTMLElement, getting from an element obtained from a node that has appendChild. It seems to behave as if the contents of the <style> element were read-only in Internet Explorer.

Question

So the question is: Is there a way to change the contents of the <style> element in Internet Explorer?

While the current problem is with IE7, a cross-browser solution would be great if possible.

application

Sources:

Style Element (MSDN): http://msdn.microsoft.com/en-us/library/ms535898.aspx a>

HTMLStyleElement (W3C): http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977

Full test code

You can use this test code if you want to reproduce your problem:

 <html> <head> <style id="ID_Style"> .myStyle { color : #FF0000 ; } </style> <script> function replaceStyleViaDOM(p_strContent) { var oOld = document.getElementById("ID_Style") ; var oParent = oOld.parentNode ; oParent.removeChild(oOld) ; var oNew = document.createElement("style") ; oParent.appendChild(oNew) ; oNew.setAttribute("id", "ID_Style") ; var oText = document.createTextNode(p_strContent) ; oNew.appendChild(oText) ; } function replaceStyleViaInnerHTML(p_strContent) { document.getElementById("ID_Style").innerHTML = p_strContent ; } </script> <script> function setRedViaDOM() { replaceStyleViaDOM("\n.myStyle { color : #FF0000 ; }\n") } function setRedViaInnerHTML() { replaceStyleViaInnerHTML("\n.myStyle { color : #FF0000 ; }\n") } function setBlueViaDOM() { replaceStyleViaDOM("\n.myStyle { color : #0000FF ; }\n") } function setBlueViaInnerHTML() { replaceStyleViaInnerHTML("\n.myStyle { color : #0000FF ; }\n") } function alertStyle() { alert("*******************\n" + document.getElementById("ID_Style").innerHTML + "\n*******************") ; } </script> </head> <body> <div> <button type="button" onclick="alertStyle()">alert Style</button> <br /> <button type="button" onclick="setRedViaDOM()">set Red via DOM</button> <button type="button" onclick="setRedViaDOM()">set Red via InnerHTML</button> <br /> <button type="button" onclick="setBlueViaDOM()">set Blue via DOM</button> <button type="button" onclick="setBlueViaInnerHTML()">set Blue via InnerHTML</button> </div> <p class="myStyle"> Hello World ! </p> </body> </html>

Thanks!

Edit

Note that moving the <style> element from <head> to <body> does not change the problem.

+6
source share
2 answers

Creating CSS on the fly has its advantages. If you want to set the innerHTML of a style element in IE, use styleSheet.cssText. For example: http://jsbin.com/awecu4

 <!doctype html> <script> var style = document.createElement('style'), script = document.getElementsByTagName('script')[0], styles = '#test{background:green;}'; script.parentNode.insertBefore(style, script); try{style.innerHTML = styles;} //IE fix catch(error){style.styleSheet.cssText = styles;} </script> <div id=test>Div with id of test</div>
+15
source

Today in all browsers (including, I believe, IE9 +) you can set the textContent value in the style element, and it will work the way you want, including > in selectors.

+4
source

More articles:


All Articles