按钮更改 css 样式，切换到深色/浅色模式

Question

旧（你好，提前谢谢你，我想做一个暗模式的按钮，如果你点击它然后它变成暗模式然后按钮被称为白色模式然后当你再次点击它时它变成白色模式并且按钮是再次调用黑暗模式。）

新（现在当你点击它时按钮改变样式丢失了）

function myFunction() {
   var element = document.page;
   element.classList.toggle("dark-mode");
}

<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>


</body>
</html>

Answer 1

我不相信 document.page 是有效的 js。将 class 分配给 body

document.getElementsByTagName('button')[0].textContent='dark-mode';
function myFunction() {
   var element = document.getElementsByTagName('body')[0];   
   element.classList.toggle("dark-mode");
   
   var button = document.getElementsByTagName('button')[0];
   if(button.textContent == 'dark-mode')button.textContent='white-mode';
   else button.textContent='dark-mode';
}

<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()"></button>


</body>
</html>

按钮更改 css 样式，切换到深色/浅色模式

button change css style at switch to dark / lightmode

html

javascript

css

themes

darkmode