Adding External Stylesheet using JavaScript

Question

I need to add an link to an external css file in my header using an external javascript file. Don't ask why; I just need to do it. document.write() doesn't work btw.

You should be able to add a link node to the DOM same as you would add a p or div node to the document. Have you tried that? The question is whether the style would be applied. I really don't know.... Good question. Someone tried it here: stackoverflow.com/questions/512070/… — Ray Toal
– Ray Toal, Commented Sep 1, 2011 at 4:22
@Ray Toal - yup, the styles will be applied once you insert the link element on the head. — Ben
– Ben, Commented Sep 1, 2011 at 4:32

Ben · Accepted Answer · 2011-09-01 04:27:58Z

19

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);

answered Sep 1, 2011 at 4:27

Ben

16.6k9 gold badges47 silver badges65 bronze badges

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

3 Comments

Michael Mior Over a year ago

Note that IE isn't always happy about link tags being inserted this way. Check for document.createStylesheet and use if it eists.

Howdy_McGee Over a year ago

honestly I don't care too much for IE so not a problem. Thanks Ben!

Huy Nguyen Over a year ago

Use document.head.appendChild(element); instead of document.getElementsByTagName("head")[0].appendChild(element);

Adria · Accepted Answer · 2015-08-03 07:20:34Z

5

Alternative one liner:

document.head.insertAdjacentHTML( 'beforeend', '<link rel=stylesheet href=/ext.css>' );

answered Aug 3, 2015 at 7:20

Adria

9,1414 gold badges39 silver badges31 bronze badges

1 Comment

waldyrious Over a year ago

Nice! This is the neatest solution I've found so far :)

Collectives™ on Stack Overflow

Adding External Stylesheet using JavaScript

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related