Jump to content
chumpers

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

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

Share this post


Link to post
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;}

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...