Unknown Runtime Error when using JavaScript to append CSS to Body in IE8

Question

I'm having an issue inserting a CSS @import rule into my <body> in Internet Explorer 8. I'm doing this as a way to defer non-critical CSS.

When I run the following code I get an "Unknown Runtime Error" on line 6 (ref_obj.innerHTML = ...):

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");

ref_obj.type = "text/css";
ref_obj.innerHTML = "@import url(\""+css_path_1_str+"\");";

el_body.appendChild(ref_obj);

As you can probably guess, the code works on Chrome and Firefox without any issue.

After doing a search here on SO, I stumbled on this post - Why is document.getElementById('tableId').innerHTML not working in IE8? - where it says that innerHTML for STYLE [and a few other elements] on IE is read-only.

Any ideas how I can edit my code to work around these limitations?

NOTE: Only pure Vanilla JavaScript.

EDIT:

Problem solved, but just for completeness, here is the code that should work (cross-browser).

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");
ref_obj.type = "text/css";

el_body.appendChild(ref_obj);

if(ref_obj.styleSheet)
{
    //IE
    ref_obj.styleSheet.cssText = "@import url(\""+css_path_str+"\");";
}
else
{
    //Other Browsers
    var ref_obj_text_node_obj = document.createTextNode("@import url(\""+css_path_str+"\");");
    ref_obj.appendChild(ref_obj_text_node_obj);
}

You can set the content of <style> elements with innerText I think; there's some IE-only property like that. — Pointy
– Pointy, Commented Jul 5, 2015 at 14:21
did you try using a link (href attribute for link) instead of a style ? (add it to the head) — Gabriele Petrioli
– Gabriele Petrioli, Commented Jul 5, 2015 at 14:23
There's no innerHTML attribute of a <style> tag. You can create a textNode and append to it. — marekful
– marekful, Commented Jul 5, 2015 at 14:23
@marekful ... except innerHTML does work in other browsers. — Pointy
– Pointy, Commented Jul 5, 2015 at 14:28
@GabyakaG.Petrioli ah OK, I see what you mean. Yes that might work (though we're talking about IE8 here so who knows). — Pointy
– Pointy, Commented Jul 5, 2015 at 20:54

ObiHill · Accepted Answer · 2015-07-05 15:49:30Z

1

What you can do to make IE happy is use the styleSheet.cssText property of the node after you've inserted it into the DOM:

var css_path_str = "my.css",
el_body = document.getElementsByTagName('body')[0],
ref_obj = document.createElement("style");
ref_obj.type = "text/css";

el_body.appendChild(ref_obj);
ref_obj.styleSheet.cssText = "@import url(\""+css_path_str+"\");";

edited Jul 5, 2015 at 15:49

ObiHill

12k25 gold badges93 silver badges142 bronze badges

answered Jul 5, 2015 at 14:32

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ObiHill Over a year ago

Hmmm...it's saying "styleSheet is null or not an object".

ObiHill Over a year ago

Also, if I don't remove ref_obj.type = "text/css";, IE crashes. What a weird browser.

Pointy Over a year ago

@ObinwanneHill that's odd, but the type attribute isn't needed anyway; browsers always interpret <style> elements as CSS. I know that the .styleSheet.cssText thing works. Maybe you have to add the element to the DOM first? (In my code, the <style> element is already in the DOM. I don't know why that would matter, but it's IE.)

ObiHill Over a year ago

You are quite right. Apparently, I have to append the <style> element to the DOM before I use .styleSheet.cssText. Did that and it works. I can't see the @import in the DOM inspector, but I have a rule in the CSS file that modifies a div on the page and that is the only way I know that it's working. Will edit your answer and accept.

ObiHill Over a year ago

Edited your answer inline with my original snippet. I hope you don't mind?

Collectives™ on Stack Overflow

Unknown Runtime Error when using JavaScript to append CSS to Body in IE8

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related