Have Geek Brain

Updating CSS style in IE after dynamically removing style link

I have a problem with dynamically manipulating styles in IE7 (IE8 is fine). Using javascript I need to add and remove a <link / "> node with a css file definition.

Adding and removing a node as a child of <head / "> works fine under Firefox. Unfortunately, after removing it in IE, although the tag is removed correctly, the page style is not updated.

The example below adds and removes plain css (makes the background green). After being removed in FF, the background is rotated by default, but remains green in IE.

index.html

<html>
<head>
</head>
<script language="javascript" type="text/javascript">

var node;

function append(){
    var headID = document.getElementsByTagName("head")[0];       
    node = document.createElement('link');
    node.type = 'text/css';
    node.rel = 'stylesheet';
    node.href = "s.css";
    node.media = 'screen';
    headID.appendChild(node);
}

function remove(){  
    var headID = document.getElementsByTagName("head")[0];      
    headID.removeChild(node);
}
</script>
<body>

<div onClick="append();">
add
</div>

<div onClick="remove();">
remove
</div>

</body>
</html>

And the stylesheet:

s.css
body { background-color:#00CC33  }

Here's a live example: http://rlab.pl/dynamic-style/

Is there a way to make it work?

+2


a source to share


1 answer


Rybz, I personally would set the "initial" stylesheet to reset back (also because it helps browsers to reset "my" desired initial settings, not the default in the browser) and when removing the style sheet from the DOM I have to insert one to reset at. I don't know if this will work for what you are trying to do, but it worked for me in a similar situation, and if I remember correctly, I had the same problem as you and it fixed it.



+1


a source






More articles:


All Articles