Class added to ClassList is not being applied
Question
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. Is there an issue with the CSS?
Here is the full code, with a bunch of console.log's to show that the classes are definitely added:
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 answers
solution1
0 ACCPTED 2018-10-05 04:32:48
This works.
You can use toggle or replace methods to achieve this.
- If
toggleis used, each element must be toggled twice to add a class and to remove a class. - If
replaceis used, then a single call is enough.
replace is not supported in IE, Safari.
- 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.
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>
solution2
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 :)
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.