未应用添加到ClassList的类
[英]Class added to ClassList is not being applied
问题描述
I am trying to make a page that when a button is pressed, the colors of the button and the background swap. 
我正在尝试制作一个页面，当按下按钮时，按钮的颜色和背景会交换。
document.querySelector("body.light").classList.toggle("dark");
document.querySelector("button.dark").classList.toggle("light");
But even though the "dark" class is toggled on, it is not applied to the background. 但是，即使打开了“暗”类，它也不会应用于背景。 I've noticed that when I swap the CSS classes (put the .light class first instead of the .dark class), the reverse happens, where the background color changes, but not the button color. 我已经注意到，当我交换CSS类（首先使用.light类而不是.dark类）时，会发生相反的情况，背景颜色会更改，而按钮颜色不会更改。 Is there an issue with the CSS? CSS有问题吗？
Here is the full code, with a bunch of console.log's to show that the classes are definitely added: 这是完整的代码，带有一堆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 个解决方案
解决方案1
0 已采纳 2018-10-05 04:32:48
This works. 这可行。
You can use toggle or replace methods to achieve this. 您可以使用toggle或replace方法来实现。
MDN Docs for reference MDN文件供参考
- If
toggleis used, each element must be toggled twice to add a class and to remove a class.如果使用toggle，则每个元素必须切换两次以添加一个类并删除一个类。 - If
replaceis used, then a single call is enough.如果使用replace，则一个调用就足够了。
replace is not supported in IE, Safari. IE，Safari不支持replace 。
- Don't use class to select the elements. 不要使用类来选择元素。 Since you have changed the classes in first click, the elements cannot be selected again. 由于您已经在第一次单击中更改了类，因此无法再次选择元素。 Consider using
idordata-attributes.考虑使用id或data-attribute。
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>
解决方案2
0 2018-10-05 05:20:57
The issue is you are appending class dark and light , but not replacing it with one another, few minor updates to your js and css and it works fine, hope it helps :) 问题是您要添加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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.