动态更改 css 文件

Question

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

当我尝试更改样式时，如果我将 go 设置为“调试模式”，我看到样式更改正确，但是一旦退出 js function，它就会返回到以前的样式（默认）。

这是代码：

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>

在这种情况下，我在引导程序和引导程序材料之间进行交换，但是您可以将这些 URL 替换为本地 css 文件。