网站明暗模式切换按钮失效求助（附HTML/JS代码）

你的代码里有两个明显问题，直接修改后就能正常工作：

错误点说明 #

• 多余的.x：document.getElementById('body')已经获取到了body元素，不需要额外加.x
• 背景色赋值格式错误："color:black"是CSS完整声明的写法，但JavaScript中给style属性赋值时，直接写颜色值或者使用backgroundColor属性更规范

修正后的代码 #

HTML（保持你原有的即可） #

<button onclick="light_mode()">Light mode</button>
<button onclick="dark_mode()">Dark mode</button>

JavaScript（修改这部分） #

function dark_mode() {
    // 写法1：直接用background属性赋值颜色值
    document.getElementById('body').style.background = "black";
}
function light_mode() {
    // 写法2：用backgroundColor属性（更标准的JavaScript写法）
    document.getElementById('body').style.backgroundColor = "white";
}

更简洁的进阶写法（可选） #

可以把两个函数合并成一个，通过传参减少重复代码，更易维护：

function toggleMode(color) {
    document.getElementById('body').style.backgroundColor = color;
}

对应的HTML改成：

<button onclick="toggleMode('white')">Light mode</button>
<button onclick="toggleMode('black')">Dark mode</button>

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