如何使用div实现深色/浅色模式切换？求JS实现方案指导

没问题，我来帮你搞定这个主题切换的功能！你之前的JS没成功，大概率是执行时机不对或者选择器/属性操作的细节没处理好，我给你一套完整的可行方案：

1. 核心JS实现（原生JS，无框架依赖） #

首先要确保代码在DOM完全加载后再执行，不然会出现找不到元素的情况。下面是完整的代码：

// 等待DOM加载完毕后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取页面容器和主题切换按钮
  const pageContainer = document.querySelector('.page.login');
  const themeSwitchBtn = document.getElementById('switch-theme');

  // 先检查元素是否存在，避免控制台报错
  if (!pageContainer || !themeSwitchBtn) {
    console.error('找不到目标元素，请检查类名/ID是否正确');
    return;
  }

  // 给切换按钮绑定点击事件
  themeSwitchBtn.addEventListener('click', function() {
    // 获取当前页面的theme属性值
    const currentTheme = pageContainer.getAttribute('theme');
    // 切换主题：如果是light就换成dark，反之亦然
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    
    // 更新页面容器的theme属性
    pageContainer.setAttribute('theme', newTheme);
    // （可选）同步更新切换按钮自身的theme属性，保持样式统一
    themeSwitchBtn.setAttribute('theme', newTheme);
  });
});

2. 关键细节说明 #

• DOM加载时机：用DOMContentLoaded事件包裹代码，确保页面所有元素都渲染完成后再获取元素，这是新手常踩的坑！
• 元素选择器：querySelector('.page.login')能精准匹配同时拥有page和login类的div，getElementById('switch-theme')直接通过ID定位按钮，这两个选择器要和你的HTML结构完全对应。
• 属性操作：用getAttribute()获取当前主题值，setAttribute()设置新值，这是操作自定义属性的标准方法。

3. 配套CSS样式（让切换生效） #

光切换属性还不够，你需要根据theme属性写对应的样式，这样页面才会有视觉变化：

/* 浅色模式样式 */
.page.login[theme="light"] {
  background-color: #fff;
  color: #333;
}

/* 深色模式样式 */
.page.login[theme="dark"] {
  background-color: #1a1a1a;
  color: #fff;
}

/* 切换按钮的主题同步样式 */
.switch-btn[theme="light"] {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

.switch-btn[theme="dark"] {
  background-color: #fff;
  color: #333;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

把这些代码分别放到你的HTML的<script>标签（或外部JS文件）和<style>标签（或外部CSS文件）里，点击切换按钮就能正常切换主题了！

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