Jump to content

Use Innerhtml Property To Get And Replace The Content Of A <Style Id='somestyle'> Tag


chumpers
 Share

Recommended Posts

The following adapted code taken from this page works in firefox (and I assume some other browsers), but it does not work in internet explorer. The specific part, which stops the script entirely in IE is highlighted in red bold below. Is there a work around to solve this problem so that I can change the content of a style sheet dynamically - using onClick etc Thanks as always for your time. <html><head> <style id="poo" readonly=false>#myAnchor{color:green}</style><script type="text/javascript">function changeLink(){document.getElementById('poo').innerHTML="#myAnchor{color:red}"; document.getElementById('myAnchor').innerHTML="W3Schools";document.getElementById('myAnchor').href="http://www.w3schools.com";document.getElementById('myAnchor').target="_blank";}</script></head><body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a><input type="button" onclick="changeLink()" value="Change link"> </body></html>

Edited by chumpers
Link to comment
Share on other sites

Internet Explorer needs a different approach, you have to use the styleSheet object.

var el = document.getElementById('poo');var rule = "#myAnchor { color: red; }";if(el.styleSheet.addRule) { // If this is Internet Explorer  var l = el.styleSheet.rules.length;  el.styleSheet.removeRule(l - 1);  el.styleSheet.addRule(rule);} else {  el.innerHTML= rule;}

Link to comment
Share on other sites

Thank you, This was not obvious from the tutorials and I could not have completed the function without your help. Many thanks. Aditionally, I put a question on the CSS forum. since there have been no replies to this for a long time, could it be moved here? After further research, I think it may not be possible to make custom radio buttons without js, so i'd rather just work on the js question. If I need to reformat it let me know and I'll rewrite the post here. Many thanks,Elliott.

Link to comment
Share on other sites

Update - this does not seem to be the correct format forel.styleSheet.addRule(rule); where rule is a string such as "#selector{attributes:values;etc}" Microsoft's IE seems to want things in the format: el.styleSheet.addRule("#someSelector","someValues") also firefox refuses to even acknowledge the existance of "addRule" and breaks the function.Therefore the only way I can think of to make sure IE is behaving like the other browsers is the less than elegant example below <style id='poo' type='text/css' > #box{background-color:red;}</style> <script>function changeStuff(){ var el = document.getElementById('poo'); someSelector = "#box"; someValues ="background-color: blue; height:200px;" if(el.styleSheet!=undefined) { // If this is Internet Explorer var l = el.styleSheet.rules.length; el.styleSheet.removeRule(l - 1); el.styleSheet.addRule(someSelector , someValues); } else { el.innerHTML= someSelector + "{" + someValues + "}"; }}</script> <div id=box>some stuff</div><br><input type=button onClick='changeStuff()'>

Edited by chumpers
Link to comment
Share on other sites

Instead of doing all this, y not create a New style object (tag), and append (insert) it into the head tag? I mean, something like this:

style=document.createElement('style');rules=document.createTextNode('*{margin:0px; padding:0px}');style.appendChild(rules);document.getElementsByTagName('head')[0].appendChild(style)

Edited by O. Samuel
Link to comment
Share on other sites

Yeah I was also thinking of doing this, pruning the branch closer to the stem, sort of thing. If IE won't let you handle that tag directly, just move one step back in the DOM and see if you can create the appropriate content from there down. I'll see if it works. It's a balancing act because the actual function I need to write is wired into a few more things.

Link to comment
Share on other sites

Why not try something like this:http://www.shawnolson.net/a/503/altering_css_class_attributes_with_javascript.htmlThis is a link I was given quite a while ago by JSG, but I think it will do what you need to do. Seems the author has been maintaining it, too, so it should work in modern browsers.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...