Javascript 使用单选按钮在两个sylesheets之间切换

我想有一个切换按钮之间切换光明和黑暗的主题。我可以切换一次，但之后不会再切换。我目前的做法是：

<link id="theme-css" class="dark-theme" rel="stylesheet" href="{% static 'css/dashboard-dark.css' %}">

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitches" onclick="toggle()">
  <label class="custom-control-label" for="customSwitches">Toggle Theme</label>
</div>

<script>
    function toggle() {
      if(document.getElementById("theme-css").href="{% static 'css/dashboard-dark.css' %}"){
        document.getElementById("theme-css").href="{% static 'css/dashboard-light.css' %}"; 
      }
      else if(document.getElementById("theme-css").href="{% static 'css/dashboard-light.css' %}"){
        document.getElementById("theme-css").href="{% static 'css/dashboard-dark.css' %}"; 
      }
    }
</script>

切换主题
函数切换（）{
if（document.getElementById（“theme css”）.href=“{%static”css/dashboard dark.css%}”）{
document.getElementById（“主题css”）.href=“{%static'css/dashboard light.css%}”；
}
else if（document.getElementById（“主题css”）.href=“{%static”css/dashboard light.css“%”）{
document.getElementById（“主题css”）.href=“{%static'css/dashboard dark.css%}”；
}
}

让我们看看。首先要注意的是，您正在寻找切换类型功能。 当您进行切换时，您希望将状态保持在某个位置。无论是在html元素本身上还是在javascript对象中

我将加载带有主题初始状态的脚本。让我们假设light主题并将该值存储在javascript变量中

因此，每次调用toggle函数时，您都会查询js变量状态，并根据该状态交换主题

所以你可以这样做：

// Some variable called state holds the theme state
var link = document.getElementById("theme-css");
if(state == 'light')
     link.href = "<the-dark-uri-css-path>";
else
     link.href = "<the-light-uri-css-path>";
// The you toggle the state val
state = state=='light'? 'dark' : 'light';

//某个名为state的变量保存主题状态
var link=document.getElementById（“主题css”）；
如果（状态==‘灯光’）
link.href=“”；
其他的
link.href=“”；
//您可以切换状态val
状态=状态=='light'？'黑暗“：“光明”；

---

请记住，您可以将其构建为对象，并将主题的状态保留在对象属性中。

文档中没有两个元素，而是只有一个元素，并使用javascript控制其“href”属性值。@MarkSkayff我已更新了我的帖子。您可以为主题预加一个类名，然后加载这两个文件。然后可以切换body类。比如.dashboard dark.style{}和.dashboard light.style{}等等。。您的css将更大，但在更改主题时可能会失去加载效果。根据您的代码，if语句的计算结果将始终为true，因为您正在执行赋值，而不是使用Django模板标记

==

或

====

@MarkSkayff检查是否相等