CODEWITHSUNDEEP
htmldomcoding-style
paercebal
paercebal

Reputation: 83309

Change the content of a <style> element through JavaScript

The 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 modify the contents of <style> through JavaScript.

The Expected Solution

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.

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.

According to MSDN, the <style> element has an innerHTML property, and according to W3C, the <style> 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 <style> element was readonly on Internet Explorer.

The Question

So the question is: Is there a way to modify the content of a <style> element on Internet Explorer?

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

Appendix

Sources:

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

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

Complete 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 the <head> into the <body> doesn't change the problem.

Upvotes: 8

Views: 13839

Answers (4)

Chathura Ranasinghe
Chathura Ranasinghe

Reputation: 1

<!doctype html>

//html code here

<script>

document.getElementsByClassName("").style.color = "blue";

document.getElementsByClassName("").style.color = "#121212";

</script>

</html>

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18565

In terms of setting style, the CSSStyleSheet.replaceSync() method works. There is also .insertRule. If you want to insert from a larger string just do const mystylesheet = new CSSStyleSheet(".myClass{color:"green" ...}");

const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync("h1 { color: blue; }");
document.adoptedStyleSheets = [stylesheet];
h1 { color: red; }
<h1>Hello World</h1>

Upvotes: 0

Stuart P. Bentley
Stuart P. Bentley

Reputation: 10675

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

Upvotes: 14

Lime
Lime

Reputation: 13532

Generating CSS on the fly has its advantages. If you would like 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>

Upvotes: 15

Related Questions