深色模式和浅色模式html，css，javascript如何

您好，提前感谢您，我想做一个带有深色模式的按钮，如果你点击它，它就会变成深色模式，然后这个按钮被称为白色模式，然后当你再次点击它时，它就会成为白色模式，这个按钮再次被称为深色模式。

代码：

<!DOCTYPE html> 
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
<script>
function myFunction() {
var element = document.page;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>

您正试图在document.page上切换dark-mode类，但该类不存在。

相反，您应该在document.body上切换它。

<!DOCTYPE html> 
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>

要仅在div上切换类，请使用querySelector:

<!DOCTYPE html> 
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
<script>
function myFunction() {
var element = document.querySelector('div.page');
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>

function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
if (element.classList.contains("dark-mode")){
document.getElementById('btn').innerHTML = "Light Mode";
}
else{
document.getElementById('btn').innerHTML = "Dark Mode";
}
}

.page {
display:inline;
background:#FFF;
color: #121212;
font-size: 25px;
}
.dark-mode,
.dark-mode .page {
background-color:#202020;
color: #FFF;
}

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
<div class="page">Hello</div>
<br><br><br>
<button onclick="myFunction()" id="btn">Dark mode</button>
</body>
</html>

相关内容

最新更新

热门标签：