如何用JavaScript将<body>标签ID设置为<select>元素的值

首先，不建议通过修改<body>的ID来切换模式——ID是元素的唯一标识，应该保持固定；切换状态更适合用CSS类来实现。下面是修正后的完整方案：

1. 调整HTML结构 #

不需要给body设置动态ID，保持基础结构即可：

<body class="normal">
  <select name="ld" id="ld">
    <option value="normal" selected>Light mode</option>
    <option value="darkmode">Dark mode</option>
  </select>
</body>

2. 修改CSS规则 #

把原来的ID选择器改成类选择器，明确两种模式的样式：

body {
  font-family: sans-serif;
  text-align: center;
  cursor: default;
  transition: background-color 0.3s, color 0.3s; /* 添加入场过渡，提升体验 */
}

body.normal {
  background-color: white;
  color: black;
}

body.darkmode {
  background-color: black;
  color: white;
}

3. 添加JavaScript逻辑 #

监听下拉框的change事件，切换body的类：

const modeSelector = document.getElementById('ld');
const body = document.body;

modeSelector.addEventListener('change', function() {
  // 先移除所有模式类，再添加选中的目标类
  body.classList.remove('normal', 'darkmode');
  body.classList.add(this.value);
});

额外优化：记住用户选择 #

如果需要刷新页面后保留用户的模式偏好，可借助localStorage存储设置：

const modeSelector = document.getElementById('ld');
const body = document.body;

// 页面加载时读取本地存储的模式
const savedMode = localStorage.getItem('preferredMode') || 'normal';
body.classList.add(savedMode);
modeSelector.value = savedMode;

// 切换模式时同步保存到本地存储
modeSelector.addEventListener('change', function() {
  body.classList.remove('normal', 'darkmode');
  body.classList.add(this.value);
  localStorage.setItem('preferredMode', this.value);
});

为什么不用ID切换？ #

• ID是元素的唯一标识，动态修改ID不符合HTML语义化规范。
• 类的设计初衷就是用来描述元素的状态、样式，更适配这种动态切换场景。

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