为什么onclick点击事件需要双击才能触发背景样式切换？

核心原因是样式属性的读取结果和你预期的字符串不匹配，触发了错误的逻辑分支：

1. 你读写的是background复合属性而非单独的backgroundColor属性。当你执行document.body.style.background = 'white'时，浏览器会自动补全background所有子属性的默认值，你读取document.body.style.background拿到的是包含背景图、平铺规则、位置等信息的完整复合字符串，比如rgb(255, 255, 255) none repeat scroll 0% 0%，永远不可能和字符串'white'相等。
2. 就算你换成backgroundColor读写，部分浏览器会自动将颜色名转为rgb格式返回，document.body.style.backgroundColor === 'white'判断依然会不成立。

第一次点击时，判断条件不满足，会执行else分支再次把背景设置为white，页面没有视觉变化，就会给你一种点击没有触发的错觉。

推荐两种稳定的修复方式：

• 方案1：用独立变量存储状态，避免直接读取样式判断，可靠性最高

document.body.style.background = 'white';
// 新增状态变量存储当前模式
let isDarkMode = false;
function changeMood() {
  isDarkMode = !isDarkMode;
  document.body.style.background = isDarkMode ? 'rgb(20, 20, 20)' : 'white';
}

• 方案2：改用backgroundColor属性，统一用rgb格式做判断

document.body.style.backgroundColor = 'white';

function changeMood() {
  document.body.style.backgroundColor === 'rgb(255, 255, 255)' ?
    document.body.style.backgroundColor = 'rgb(20, 20, 20)' :
    document.body.style.backgroundColor = 'white';
}

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