按钮在切换到暗/亮模式时更改 CSS 样式答案

【问题标题】：button change css style at switch to dark / lightmode按钮在切换到暗/亮模式时更改 CSS 样式
【发布时间】：2021-12-30 14:59:03
【问题描述】：

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

新的（现在单击按钮时缺少更改样式）

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>

【问题讨论】：

标签： javascript html css themes darkmode

【解决方案1】：

我不相信 document.page 是有效的 js。将类分配给 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>

【讨论】：