我试图制作一个页面,当按下按钮时,按钮的颜色和背景会互换。
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>
答案 0 :(得分:0)
这有效。
您可以使用toggle
或replace
方法来实现。
toggle
,则必须将每个元素切换两次以添加类和删除类。replace
,那么一个电话就足够了。 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>
答案 1 :(得分:0)
问题是您要追加类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