暗模式和亮模式html、css、javascript怎么样？
[英]Dark mode and light mode html, css, javascript how?
问题描述
你好，提前谢谢你，我想用暗模式做一个按钮，如果你点击它，它就会变成暗模式，然后按钮被称为白色模式，然后当你再次点击它时，它变成白色模式，按钮被称为再次黑暗模式。
代码：
<!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>
2 个解决方案
解决方案1
1 2021-11-19 18:22:22
您正在尝试在document.page上切换不存在的dark-mode class 。
相反，您应该在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上切换 class ，请使用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>
解决方案2
0 2021-11-19 18:35:32
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>
解决方案3
0 2021-11-19 18:51:07
以上所有代码都可以工作，但是当您刷新页面时主题不会持续存在，并且会将其重置为默认主题。
我已经制作了一个，但它使用 jquery 库并且它与缓存一起使用，因此即使在刷新后主题也可以持续存在。
如果对你有帮助请点赞
暗模式/亮模式 - html,css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.