如何恢复javascript对css的更改

Question

所以我有一个按钮，可以为我的网络应用切换一个简单的黑暗主题。

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

一旦用户点击它将在javascript中激活此功能。

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

这只会改变背景。我想知道用户是否第二次点击按钮它将恢复该功能所做的更改。 （即打开/关闭）感谢您提前的时间和帮助！

Answer 1

你可以通过切换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 2

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

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

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