如何使用HTML、CSS、JavaScript实现Dark mode与light mode切换功能？

原代码存在两处问题：

• 元素选择逻辑错误：document.page 不是合法的类元素选择方法，无法命中类名为page的页面容器，导致类名切换不生效
• 未实现按钮文字同步切换的逻辑，不满足点击后按钮文本随模式变化的需求

修正后完整代码 #

<!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() {
  // 获取页面容器元素
  const pageElement = document.querySelector('.page');
  // 获取切换按钮元素
  const toggleBtn = document.querySelector('button');
  // 切换暗黑模式类名
  pageElement.classList.toggle('dark-mode');
  // 根据当前模式切换按钮文本
  toggleBtn.textContent = pageElement.classList.contains('dark-mode') ? 'white mode' : 'dark mode';
}
</script>

</body>
</html>

核心改动说明 #

• 替换原有的错误元素选择写法，用document.querySelector('.page')正确匹配页面容器
• 新增按钮元素获取逻辑，在切换模式类名后判断当前页面模式，同步修改按钮展示文本
• 保留原有CSS样式定义，无需额外调整样式即可实现需求

内容的提问来源于stack exchange，提问作者Kangoroo