Using Javascript to insert css link into the head of a page

Question

I 3rd party site that includes this script:

 var foo = "Hello World!";

      (function() {
        var foo = "Goodbye World!";
        document.write("<p class='something'>Inside our anomymous function foo means '" + foo + '".</p>');
       })();

I would now like to insert (using pure javascript) an external reference to a style sheet. How can this be done?

Using jquery you could do it like this:

var css_link = $("<link>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: "style.css" 
});
css_link.appendTo('head');

however I need to keep this pure javascript.

Madhur · Accepted Answer · 2014-03-30 19:14:07Z

3

Quickly tried below in Chrome and it works..

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

answered Mar 30, 2014 at 19:14

Madhur

2,2191 gold badge25 silver badges32 bronze badges

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

Comments

Sumner Evans · Accepted Answer · 2014-03-30 19:11:20Z

0

Place a <script> tag in the head like this:

<head>
    <script>
        document.write('<link rel="stylesheet" type="text/css" href="style.css">');
    </script>
</head>

The document.write() function appends whatever text you have as the parameter right where the script is.

answered Mar 30, 2014 at 19:11

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

1 Comment

Jonathan Over a year ago

I think OP means at runtime.

Jonathan · Accepted Answer · 2014-03-30 19:15:14Z

0

You can do it at runtime like this:

var css = document.createElement("LINK");
css.href = "style.css";
css.type = "text/css";
document.head.appendChild(css);

Edit: document.head is compatible with normal browsers and IE9+

answered Mar 30, 2014 at 19:15

Jonathan

9,1924 gold badges47 silver badges82 bronze badges

Collectives™ on Stack Overflow

Using Javascript to insert css link into the head of a page

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related