未应用添加到ClassList的类

时间:2018-10-05 04:02:49

标签: javascript css

我试图制作一个页面,当按下按钮时,按钮的颜色和背景会互换。

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>

2 个答案:

答案 0 :(得分:0)

这有效。

您可以使用togglereplace方法来实现。

MDN Docs for reference

  1. 如果使用toggle,则必须将每个元素切换两次以添加类和删除类。
  2. 如果使用replace,那么一个电话就足够了。
IE,Safari不支持

replace

  1. 不要使用class选择元素。由于您已经在第一次单击中更改了类,因此无法再次选择元素。考虑使用iddata-属性。

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>

答案 1 :(得分:0)

问题是您要追加类darklight,但不能相互替换,对您的jscss进行了一些小的更新,效果很好,希望对您有所帮助:)

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