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, Jul 25 '16 at 22:39
Try this: http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also — Toby, Jul 25 '16 at 22:41
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, Jul 25 '16 at 22:44
You can look at the [source of the `loadCSS` library](https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js) (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, Jul 25 '16 at 23:49

score 2 · Answer 1 · answered Jul 25 '16 at 22:47

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 '16 at 22:47

Toby

12,743
8
43
75

Obviously you can use `window.onload` for it to run when the page loads rather than by a button. – Toby Jul 25 '16 at 22:47
`pagestyle` is a standard crossbrowser DOM element? – Jason S Jul 25 '16 at 22:53
OH, never mind, you must mean I put the ID where I want it and use javascript. That's clever. – Jason S Jul 25 '16 at 22:54
and this will always trigger a CSS reload? – Jason S Jul 25 '16 at 22:54
Not necessarily - if you switch to a `` instead of a button it will trigger a reload. – Toby Jul 25 '16 at 22:55
Hmm... I don't know enough about webpage loading events + sequence to decide whether this works for me. I'll try experimenting. – Jason S Jul 25 '16 at 22:56

score 2 · Answer 2 · answered Jul 25 '16 at 23:05

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");

select CSS URL dynamically via Javascript

2 Answers2