Question

所以我有一个按钮，可以为我的Web应用程序切换一个简单的深色主题。

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

用户单击后将激活javascript中的此功能。

function dark_mode() {
    document.body.style.background = "#2C2F33";}

这只会更改背景。我想知道如果用户第二次单击该按钮，它将恢复该功能所做的更改。（即打开/关闭）感谢您的时间和事先的帮助！

Answer 1

只需使用三元运算符检查并更改样式：

function dark_mode() {
    document.body.style.background = document.body.style.background == "#2C2F33" ? "#FFFFFF" : "#2C2F33";
}

Answer 2

您可以通过切换CSS类来实现，这是更灵活的解决方案

function dark_mode() {
  document.body.classList.toggle('dark-mode')
}

.dark-mode {
  background: #2C2F33
 }

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

Answer 3

如果用户再次单击，则仅再次调用该函数。因此，第一次单击后便没有更多更改。

一种更好的方法是将暗模式样式分配给一个类，说“ btn--dark-mode”，然后使用js切换该类：

function dark_mode() {
document.querySelector('#dark-mode-toggle').classList.toggle('dark-mode'); // ie9+ only
}

.btn--dark-mode {
  background-color: #2C2F33;
}

<button id="dark-mode-toggle" class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

这将应用该类或根据该类是否已经存在将其取消。

Answer 4

您可以使用data标签来跟踪当前主题：

<button class="btn btn-primary" onclick="dark_mode(this);" data-dark-theme="on" >Dark Mode ON</button>

JS：

function dark_mode(ctrl) {
var darkTheme = ctrl.getAttribute("data-dark-theme"); 
  if(darkTheme== "on"){
    ctrl.setAttribute("data-dark-theme", "off"); 
    document.body.style.background = "#2C2F33";
    ctrl.innerHTML  = "Dark Mode OFF";
  }
  else {
    ctrl.setAttribute("data-dark-theme", "on"); 
    document.body.style.background = "#FFFFFF";
    ctrl.innerHTML  = "Dark Mode ON";
  }
}

Working demo

如何将对JavaScript所做的更改还原到CSS

4 个答案: