title: Change the content of a <style> element through JavaScript
body: <h2>The Problem</h2>
  
  <p>I have the following code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style id="ID_Style"&gt;
  .myStyle
  {
     color : #FF0000 ;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;p class="myStyle"&gt;
        Hello World !
     &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And I want to modify the contents of <code>&lt;style&gt;</code> through JavaScript.</p>
  
  <h2>The Expected Solution</h2>
  
  <p>The first solution was to use the innerHTML property of the style element (retrieved through its id), but while it works on Firefox, it fails on Internet Explorer 7.</p>
  
  <p>So, I used pure DOM methods, that is, creating an element called style, a text node with the desired content, and append the text node as a child of the style node, etc. It fails, too.</p>
  
  <p>According to MSDN, the <code>&lt;style&gt;</code> element has an <code>innerHTML</code> property, and according to W3C, the <code>&lt;style&gt;</code> element is a HTMLStyleElement, which derives from HTMLElement, deriving from Element deriving from Node, which has the appendChild method. It seems to behave as if the content of a <code>&lt;style&gt;</code> element was readonly on Internet Explorer.</p>
  
  <h2>The Question</h2>
  
  <p>So the question is: <b>Is there a way to modify the content of a <code>&lt;style&gt;</code> element on Internet Explorer?</b></p>
  
  <p>While the current problem is with IE7, a cross-browser solution would be cool, if possible.</p>
  
  <h2>Appendix</h2>
  
  <h3>Sources:</h3>
  
  <p>Style Element (MSDN): <a href="http://msdn.microsoft.com/en-us/library/ms535898.aspx" rel="nofollow noreferrer"><a href="http://msdn.microsoft.com/en-us/library/ms535898.aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/ms535898.aspx</a></a></p>
  
  <p>HTMLStyleElement (W3C): <a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977" rel="nofollow noreferrer"><a href="http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977" rel="nofollow noreferrer">http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977</a></a></p>
  
  <h3>Complete Test Code</h3>
  
  <p>You can use this test code if you want to reproduce your problem:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style id="ID_Style"&gt;
  .myStyle
  {
     color : #FF0000 ;
  }
  &lt;/style&gt;
  &lt;script&gt;
  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 ;
  }
  &lt;/script&gt;
  &lt;script&gt;
  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*******************") ;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;div&gt;
        &lt;button type="button" onclick="alertStyle()"&gt;alert Style&lt;/button&gt;
        &lt;br /&gt;
        &lt;button type="button" onclick="setRedViaDOM()"&gt;set Red via DOM&lt;/button&gt;
        &lt;button type="button" onclick="setRedViaDOM()"&gt;set Red via InnerHTML&lt;/button&gt;
        &lt;br /&gt;
        &lt;button type="button" onclick="setBlueViaDOM()"&gt;set Blue via DOM&lt;/button&gt;
        &lt;button type="button" onclick="setBlueViaInnerHTML()"&gt;set Blue via InnerHTML&lt;/button&gt;
     &lt;/div&gt;
  
     &lt;p class="myStyle"&gt;
        Hello World !
     &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks !</p>
  
  <h3>Edit</h3>
  
  <p>Note that moving the <code>&lt;style&gt;</code> element from the <code>&lt;head&gt;</code> into the <code>&lt;body&gt;</code> doesn't change the problem.</p>