Javascript 动态更改css文件

我试图动态更改css文件，但遇到了一个问题：

当我尝试更改样式时，如果转到“调试模式”，我会看到样式正确更改，但一旦退出js函数，它就会返回到以前的样式（默认）

代码如下：

Js:

HTML

风格1
风格2
风格3
风格4

---

谢谢大家。

我相信，如果您要更改主题，您可以通过使用html数据属性而不是使用单独的CSS文件来实现这一点

功能切换主题（e）{
让theme=document.getElementById（“主题选择器”）.value；
让app=document.getElementById（“app”）；
app.setAttribute（'data-theme'，theme）；
}

[数据主题=“1”]{
--前景色：#eeeeee；
--背景色：#22222；
}
[数据主题=“2”]{
--前景色：#000000；
--背景色：#eeeeee；
}
h1{
颜色：var（--前景色）；
背景色：var（--背景色）；
}

不同颜色的酷标题。。。
主题1
主题2

您是否将此代码用于“主题”选择功能？是。。。我希望用户可以动态更改主题。如果您使用html数据属性来修改CSS文件中使用的颜色，可能会更容易、更干净。在这里可以找到一个浅主题/暗主题的例子：我想做一个“风格改变”，就像这样：我不仅要改变颜色，还要改变元素和文字的配置。添加了两种替代方法作为答案，第二种方法很可能适用于您的情况。@SevenDays我还添加了第二种替代方法，您可以在其中交换整个css文件。

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

    <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>