Dynamically change css files

Question

I tried to change the css file dynamically but i have a problem :

when i try to change the style, if I go to "debug mode", I see that the style changes correctly, but as soon as it exits the js function, it returns to the previous style (default).

Here is the code:

Js :

function checkStyle(evt) {
    var strUser = evt.options[evt.selectedIndex].value;
    Style(strUser);
}

function Style(index) {

    var cssLinkIndex = 0;
    var counter;
    switch (index) {
        case "1":
            counter = "./StyleCss/style1.css";
            break;
        case "2":
            counter = "./StyleCss/style2.css";
            break;
        case "3":
            counter = "./StyleCss/style3.css";
            break;
        case "4":
            counter = "./StyleCss/style4.css";
            break;
        default:
            counter = "./StyleCss/style1.css";
    }

    changeCSS(counter, cssLinkIndex);
}

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

HTML

    <script type="text/javascript" src="./JavaScript/script.js"></script>
    <link rel="stylesheet" href="./StyleCss/style1.css">

        <div class="Menu">
            <select class="Style" onchange="checkStyle(this);">
                <option value='1' selected='selected'>Style 1</option>
                <option value='2'>Style 2</option>
                <option value='3'>Style 3</option>
                <option value='4'>Style 4</option>
            </select>
        </div>

Thanks everyone.

It might be easier and cleaner if you use html data attributes to modify which colors are used throughout your CSS file. A light theme / dark theme example can be found here: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8 — Matt Davis, Apr 25 '20 at 17:06
I would like to make a "style change" like this : https://www.w3schools.com/css/css_intro.asp I have to change not only the color but also the dispositions of the elements and the writings — SevenDays, Apr 25 '20 at 17:10
Added two alternative methods as an answer, the second is most likely applicable to your situation. — Matt Davis, Apr 25 '20 at 17:41
Does this answer your question? [Replacing css file on the fly (and apply the new style to the page)](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page) — Liam, Nov 04 '22 at 16:49

Matt Davis · Accepted Answer · 2020-04-25T17:36:46.420

I believe you could achieve this through using html data attributes instead of using separate CSS files if it is a theme change you are going for.

function switchTheme(e) {
  let theme = document.getElementById("theme-selector").value;
  let app = document.getElementById("app");
  app.setAttribute('data-theme', theme);
}

[data-theme="1"] {
  --foreground-color: #eeeeee;
  --background-color: #222222;
}

[data-theme="2"] {
  --foreground-color: #000000;
  --background-color: #eeeeee;
}

h1 {
  color: var(--foreground-color);
  background-color: var(--background-color);
}

<div id="app" data-theme="1">
  <h1>A cool title with different colors...</h1>
</div>

<select id="theme-selector" onchange="switchTheme()">
  <option value="1">Theme 1</option>
  <option value="2">Theme 2</option>
</select>

If you did however want to swap out the entire file, you could try something like this:

function switchTheme(e) {
  let themeLink = document.getElementById("theme-link");
  let theme = document.getElementById("theme-selector").value;
  if (theme === "1") {
    themeLink.href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
  } else if (theme === "2") {
    themeLink.href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js";
  }
}

<link id="theme-link" rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<h1>A cool title with different fonts...</h1>

<select id="theme-selector" onchange="switchTheme()">
  <option value="1">Theme 1</option>
  <option value="2">Theme 2</option>
</select>

In this case I am swapping between bootstrap and bootstrap material however you could replace those URLs with local css files.

@SevenDays I added a second alternative method as well where you can swap out the entire css file. — Matt Davis, Apr 25 '20 at 17:38

Dynamically change css files

1 Answers1