暗模式和亮模式html、css、javascript怎么样？
Posted
技术标签:
【中文标题】暗模式和亮模式html、css、javascript怎么样？【英文标题】：Dark mode and light mode html, css, javascript how? 【发布时间】：2021-12-30 11:46:37 【问题描述】：您好，提前谢谢您， 我想制作一个暗模式按钮，如果你点击它，它就会变成暗模式，然后按钮被称为白色模式，然后当你再次点击它时，它变成白色模式，按钮再次被称为暗模式。
代码：
<!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>
【问题讨论】：
【参考方案1】：您正在尝试切换 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>【讨论】：
是的，但是我必须在我的在线网站上将一个 div 框变成暗模式，我在互联网上找到了它，但我不明白它是如何用于 div 类的。 @Kangoroo 我已经更新了我的答案。 我想在我的网站上包含这个但它不起作用gecko.achmeindein.de（网站是德语）左上角是按钮 @Kangoroo 您需要覆盖默认的color 和background-color。将您的 .dark-mode CSS 更改为：.dark-mode background-color: #36393F !important; color: white !important; 。
我该如何做第二页（.scrollseite2），如果暗模式是从按钮到白色模式的写入【参考方案2】：
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>【讨论】：
以上是关于暗模式和亮模式html、css、javascript怎么样？的主要内容，如果未能解决你的问题，请参考以下文章