Jump to content

innerHTML not working in IE


Recommended Posts

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 post
Share on other sites

@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 post
Share on other sites

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 post
Share on other sites
@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 post
Share on other sites

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 post
Share on other sites

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 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...