未应用添加到 ClassList 的类答案

【问题标题】：Class added to ClassList is not being applied未应用添加到 ClassList 的类
【发布时间】：2018-10-05 04:02:49
【问题描述】：

我正在尝试制作一个页面，当按下按钮时，按钮的颜色和背景会交换。

document.querySelector("body.light").classList.toggle("dark");
document.querySelector("button.dark").classList.toggle("light");

但即使“暗”类已打开，它也不会应用于背景。我注意到，当我交换 CSS 类（首先放置 .light 类而不是 .dark 类）时，会发生相反的情况，背景颜色会发生变化，但按钮颜色不会发生变化。 CSS 有问题吗？

这里是完整的代码，有一堆console.log 表明这些类确实被添加了：

var darklightArray;

function darklight() {
  darklightArray = document.querySelector("body.light").classList;

  console.log("Before");
  console.log("body: ", document.querySelector("body.light").classList);
  console.log("button: ", document.querySelector("button.dark").classList);

  document.querySelector("body.light").classList.toggle("dark"); //Changes the class to dark, then toggled again turns it light
  document.querySelector("button.dark").classList.toggle("light"); //Toggles the color of the button
  //document.querySelector("button.dark").classList.remove("dark");

  console.log("After");
  console.log("body: ", document.querySelector("body.light").classList);
  console.log("button: ", document.querySelector("button.dark").classList);
  if (darklightArray.length == 2) {
    document.querySelector("button.dark").innerHTML = "To light mode";
  } else {
    document.querySelector("button.dark").innerHTML = "To dark mode";
  }
}

.dark {
  background-color: #07000c;
  color: #D8D8D8;
}

.light {
  background-color: #F9F9F9;
  color: #000000;
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Darklight Testing</title>
  <link rel="stylesheet" type="text/css" href="../css/darklight_testing.css">
  <script src="darklight_testing.js" defer></script>
</head>

<body class="light">
  <div class="darklight">
    <button type="button" onclick="darklight()" class="dark">To dark mode</button>
  </div>
  Content
</body>

</html>

【问题讨论】：

toggle light 和 dark 对于 body 和 button
classList 不是一个数组，它是一个 live DOMTokenList，包含空格分隔的类名集。

标签： javascript css

【解决方案1】：

这行得通。

您可以使用toggle 或replace 方法来实现这一点。

MDN Docs for reference

如果使用toggle，每个元素必须切换两次才能添加类和删除类。
如果使用replace，那么一次调用就足够了。

IE、Safari 不支持replace。

不要使用类来选择元素。由于您在第一次单击时更改了类，因此无法再次选择元素。考虑使用id 或data- 属性。

var darklightArray;

function darklight()
{
  var bodyelem = document.body;
  var buttonelem = document.getElementById("toggleButton");

  bodyelem.classList.toggle("dark");
  bodyelem.classList.toggle("light");
  buttonelem.classList.toggle("light");
  buttonelem.classList.toggle("dark");
}

.dark {
  background-color: #07000c;
  color: #D8D8D8;
}

.light {
  background-color: #F9F9F9;
  color: #000000;
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Darklight Testing</title>
  <link rel="stylesheet" type="text/css" href="../css/darklight_testing.css">
  <script src="darklight_testing.js" defer></script>
</head>

<body class="light">
  <div class="darklight">
    <button type="button" id="toggleButton" onclick="darklight()" class="dark">To dark mode</button>
  </div>
  Content
</body>

</html>

【讨论】：

感谢您的帮助！我给按钮的 ID 为darklight_button，所以我可以使用document.querySelector("#darklight_button")。由于只有一个主体，我只是使用document.body 来切换两个类，所以一次只有一个。再次感谢！

【解决方案2】：

问题是您正在附加类dark 和light，但没有将其替换为另一个，对您的js 和css 进行了一些小的更新，它工作正常，希望对您有所帮助:)

var darklightArray;

function darklight() {
  darklightArray = document.querySelector("button").classList;
  document.querySelector("body").classList.toggle("dark");
  document.querySelector("button").classList.toggle("dark");
  if (darklightArray.length == 2) {
    document.querySelector("button").innerHTML = "To light mode";
  } else {
    document.querySelector("button").innerHTML = "To dark mode";
  }
}

body, button {
  background-color: #F9F9F9;
  color: #000000;
}

.dark {
  background-color: #07000c;
  color: #D8D8D8;
}

<div class="darklight">
  <button type="button" onclick="darklight()" class="btn">To dark mode</button>
</div>
Content

【讨论】：