时间戳

首页 > 解决方案 > 动态更改 css 文件

javascript - 动态更改 css 文件

问题描述

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

当我尝试更改样式时，如果我进入“调试模式”，我看到样式更改正确，但是一旦它退出 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>

谢谢大家。

标签： javascripthtmlcss

解决方案

我相信如果您要进行主题更改，您可以通过使用 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 文件。

推荐阅读