CSS style refresh in IE after dynamic removal of style link
Posted
by rybz
on Stack Overflow
See other posts from Stack Overflow
or by rybz
Published on 2010-04-28T15:21:49Z
Indexed on
2010/06/18
5:23 UTC
Read the original article
Hit count: 262
Hi!
I've got a problem with the dynamic style manipulation in IE7 (IE8 is fine). Using javascript I need to add and remove the < link /> node with the definition of css file.
Adding and removing the node as a child of < head /> works fine under Firefox. Unfortunately, after removing it in the IE, although The tag is removed properly, the page style does not refresh.
In the example below a simple css (makes background green) is appended and removed. After the removal in FF the background turns default, but in IE stays green.
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 style sheet:
s.css
body { background-color:#00CC33 }
Here is the live example: http://rlab.pl/dynamic-style/
Is there a way to get it working?
© Stack Overflow or respective owner
