chumpers Posted October 3, 2011 Share Posted October 3, 2011 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> Link to comment Share on other sites More sharing options...
Ingolme Posted October 3, 2011 Share Posted October 3, 2011 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 More sharing options...
chumpers Posted October 3, 2011 Author Share Posted October 3, 2011 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 More sharing options...
chumpers Posted October 3, 2011 Author Share Posted October 3, 2011 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()'> Link to comment Share on other sites More sharing options...
Drycodez Posted October 3, 2011 Share Posted October 3, 2011 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) Link to comment Share on other sites More sharing options...
chumpers Posted October 3, 2011 Author Share Posted October 3, 2011 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 More sharing options...
ShadowMage Posted October 3, 2011 Share Posted October 3, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.