Little Goat Posted May 4, 2007 Share Posted May 4, 2007 Hey guys,I am trying to style a web page which I have no control over the head of, so naturally I just thought to use Javascript to replace the CSS which is embedded in the head.the code I am using is this exactly: document.getElementsByTagName("style")[0].innerHTML=" "; it works fine in Opera and FireFox, but for some reason it does nothing in IE but throw an error.it says Unknown Runtime Error, and points to the line where I have that code.does anyone know why it does this?ThanksLG Link to comment Share on other sites More sharing options...
msd Posted May 4, 2007 Share Posted May 4, 2007 Try: document.getElementById('id').innerHTML = "text"; Link to comment Share on other sites More sharing options...
aspnetguy Posted May 4, 2007 Share Posted May 4, 2007 IE has some hard coded limitations, there are some arounf style tags which I assume is the cause of your error. Link to comment Share on other sites More sharing options...
Little Goat Posted May 4, 2007 Author Share Posted May 4, 2007 @msd: The problem is, the style tag does not have an ID or a Name or any of that fun stuff. so I have to detect it by the tag name.@aspnetguy: so you're saying it's impossible for me to do this, or this there some workaround I can use? do you have a website or can you show me an example of what this is?ThanksLG Link to comment Share on other sites More sharing options...
aspnetguy Posted May 4, 2007 Share Posted May 4, 2007 I tried the following test. It worked fine in FF but as expected failed all 3 times in IE. I don't think there is a way around this. IE also has some other know issues with element.setAttribute("style","code here"); so apparently there poor CSS support carries over into JScript <html><head> <style id="styleTag"> </style></head><body><script> //getElementsByTagName try { var styles = document.getElementsByTagName("style")[0]; styles.innerHTML = "body{background:#000}"; alert(styles.innerHTML); } catch(err) { alert(err.description); } //getElementById try { var styles = document.getElementById("styleTag"); styles.innerHTML = "body{background:#000}"; alert(styles.innerHTML); } catch(err) { alert(err.description); } //getElementById //appendChild try { var styles = document.getElementById("styleTag"); styles.appendChild(document.createTextNode("body{background:#000}")); alert(styles.innerHTML); } catch(err) { alert(err.description); } </script></body></html> Link to comment Share on other sites More sharing options...
jesh Posted May 4, 2007 Share Posted May 4, 2007 @aspnetguy: so you're saying it's impossible for me to do this, or this there some workaround I can use? do you have a website or can you show me an example of what this is?There are very few things that are impossible. You just have to change the way you think about the problem.What exactly are you trying to do by setting the innerHTML of a style element? If you are trying to change the style for a particular object, you can do this to change the entire stylesheet:<html><head><link rel="stylesheet" type="text/css" href="style1.css" id="test" /><script>function switchIt(){ var link = document.getElementById("test"); link.href = "style2.css";}</script><body><button onclick="switchIt();">Switch It!</button></body></html> Or this to change the style for the a particular element (e.g. the body) var body = document.body;body.style.backgroundColor = "green";body.style.fontSize = "40px";body.style.color = "red"; You can also get at the stylesheet objects in the DOM. Check out this page for more information:http://www.quirksmode.org/dom/w3c_css.htmlIf you describe in more detail what you are trying to accomplish, someone's bound to know a way to accomplish it.EDIT: OK, I reread your original post () and I see that you are trying to change the stylesheet on a page over which you have no control of the head. I think the best bet for you is either the first block of code I posted (if the stylesheets are in links) or to read that quirksmode page. You should be able to get at the style element using the DOM through the styleSheets property. Link to comment Share on other sites More sharing options...
jesh Posted May 4, 2007 Share Posted May 4, 2007 OK, I did a little testing, and in looking at the properties that are available through the DOM, I've encountered an incredibly simple solution. Here's a sample that works for me in IE, Firefox, and Opera in Windows (didn't check the Mac): <html><head><style>body { background-color: red; }</style><script>document.styleSheets[0].disabled = true;</script></head><body></body></html> If there is more than one stylesheet referenced, you can disable them all in a loop: var stylesheets = document.styleSheets;for(var i = 0; i < stylesheets.length; i++){ stylesheets[i].disabled = true;} Link to comment Share on other sites More sharing options...
pulpfiction Posted May 4, 2007 Share Posted May 4, 2007 Even this might work... document.getElementsByTagName('style')[0].disabled = true Link to comment Share on other sites More sharing options...
jesh Posted May 4, 2007 Share Posted May 4, 2007 Even this might work...document.getElementsByTagName('style')[0].disabled = true Sure enough! Link to comment Share on other sites More sharing options...
Little Goat Posted May 4, 2007 Author Share Posted May 4, 2007 Ok, thank you guys you have been a real help. It did work to disable that stylesheet, jesh. thank you for that code and the website. now I just need to find a way to add a new one. (you don't need to make suggestions, if I have problems I will ask here again.)but thanks again for all of your help. you can see my test results here: http://computerkid.caleb.googlepages.com/teststylechangesLG Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.