暗模式和亮模式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.