Add a link stylesheet dynamically in the <head&

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

How to add a link stylesheet reference to the head of a document ?

I've found this code but it's not working with all browsers, it crashes my IE7 :

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);

Thanks

Answer 1

That was a simple cross reference javascript bug. Have a nice day.

Answer 2

Internet explorer will support innerHTML, though it adds reflow this would work:

var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML    += '<link type="text/css" rel="stylesheet" href="style.css">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;

Answer 3

In IE, you could try the createStyleSheet method? That takes URL as a parameter. I don't know whether there is an equivalent in FF/chrome though..

--Senthil