JS获取元素backgroundColor返回空字符串的原因及修复方法

HTMLElement.style 接口仅能读写元素标签上通过内联style属性声明的样式，你在.toggle类样式规则中定义的background-color: white属于样式表规则，不会被写入元素的style对象，因此首次读取e.target.style.backgroundColor时拿到空字符串，判断逻辑直接进入else分支，不符合预期。
额外注意：即使能读到样式值，直接通过字符串相等匹配"white"也存在兼容问题——浏览器序列化颜色值时通常会转成RGB格式（比如白色会返回rgb(255, 255, 255)），不会返回颜色关键字，直接匹配字符串本身逻辑就不可靠。

优先推荐用类切换的方案实现，逻辑最稳定、可维护性最高：

1. 调整CSS，新增状态类对应黑色背景样式

.toggle {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    right: 300px;
    outline: 3px solid black;
    border: 3px solid white;
}
.toggle.active {
    background-color: black;
}

2. 简化JS逻辑，点击时直接切换类名即可，不需要手动读取判断样式值

setting.addEventListener("click", (e) => {
    // 如果元素内部存在子元素，建议替换为e.currentTarget，指向绑定事件的元素本身，避免点到子元素时逻辑出错
    e.target.classList.toggle("active");
});

如果场景特殊必须直接操作样式判断，用getComputedStyle获取元素实际生效的计算样式，同时兼容颜色值的RGB格式：

setting.addEventListener("click", (e) => {
    const el = e.target;
    const computedBg = getComputedStyle(el).backgroundColor.replace(/\s/g, "");
    // 白色对应的标准RGB值为rgb(255,255,255)
    el.style.backgroundColor = computedBg === "rgb(255,255,255)" ? "black" : "white";
});

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