如何恢复对javascript所做的CSS的更改

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

只需使用三元运算符检查和更改样式:

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

如果用户再次单击,则只需再次调用函数。所以,在第一次单击之后就没有其他更改了。

一个更好的方法是将暗模式样式分配给类,比如说“btn——暗模式”,然后使用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>

这将应用该类,或者根据它是否已经存在而取消它。

你可以使用 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