select CSS URL dynamically via Javascript

Question

Is there a way to add a <link rel="stylesheet" type="text/css"> with the URL dynamically-selected based on some Javascript expression evaluation?

(without using jQuery or other external library -- I want to avoid dependencies on external libraries.)

In particular I want to run some Javascript during or as a result of pageload, rather than at a later date, but I do want to make sure the CSS that has been replaced or added gets loaded as a result of running that Javascript.

I apologize if this is a duplicate, I did do a google search but wasn't 100% sure what to look for. — Jason S
– Jason S, Commented Jul 25, 2016 at 22:39
that helps, I'm looking for something with pure Javascript, no library dependencies. But I guess I can figure it out from there, doesn't look like jquery is doing anything fancy. — Jason S
– Jason S, Commented Jul 25, 2016 at 22:44
You can look at the source of the loadCSS library (a lib for async CSS loading) to see the tricks they use to get the CSS to apply without re-loading the page. It's a bit full on if you're new to JS though. — David Gilbertson
– David Gilbertson, Commented Jul 25, 2016 at 23:49

Toby · Accepted Answer · 2016-07-25 22:47:12Z

2

Try this:

Function:

function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}

Activate:

<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>

answered Jul 25, 2016 at 22:47

Toby

13.5k9 gold badges51 silver badges78 bronze badges

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

6 Comments

Toby Over a year ago

Obviously you can use window.onload for it to run when the page loads rather than by a button.

Jason S Over a year ago

pagestyle is a standard crossbrowser DOM element?

Jason S Over a year ago

OH, never mind, you must mean I put the ID where I want it and use javascript. That's clever.

Jason S Over a year ago

and this will always trigger a CSS reload?

Toby Over a year ago

Not necessarily - if you switch to a <a href="#"> instead of a button it will trigger a reload.

|

paradise-ekpereta · Accepted Answer · 2016-07-25 23:05:21Z

2

You are welcome to try this function.

function addStylesheet(file) {
    var
        head = document.getElementsByTagName("head")[0],
        style = document.createElement("link");
    style.rel = "stylesheet";
    style.type = "text/css"; //optional
    style.href = file;
    head.appendChild(style);
}

addStylesheet("style.css");

answered Jul 25, 2016 at 23:05

paradise-ekpereta

214 bronze badges

Collectives™ on Stack Overflow

select CSS URL dynamically via Javascript

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related