Динамически изменять css файлы

Question

Я пытался изменить файл css динамически, но у меня проблема:

, когда я пытаюсь изменить стиль, если я go на "режим отладки", я вижу, что стиль меняется правильно, но как только он выходит из функции js, он возвращается к предыдущему стилю (по умолчанию).

Вот код:

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>

Спасибо всем.

Answer 1

Я полагаю, что вы могли бы добиться этого, используя html атрибуты данных вместо использования отдельных CSS файлов, если вы собираетесь изменить тему.

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>

Если вы все же хотите поменять весь файл, вы можете попробовать что-то вроде этого:

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>

В этом случае я переключаюсь между bootstrap и bootstrap материалами, однако вы можете заменить эти URL-адреса локальными css файлами.