点击切换按钮无法恢复sidebar背景色至初始值的JS问题

我用JavaScript实现sidebar（id为id_sidebar的div）背景色切换时遇到问题——相同逻辑的代码能正常实现div位移、显示/隐藏元素，但唯独背景色切换失效，无法恢复到初始的#202023值。

问题根源 #

问题出在通过element.style.backgroundColor读取样式的局限性：

• 初始时sidebar的背景色是通过CSS类.sidebar设置的，并非直接写在元素的style属性里，所以div2.style.backgroundColor初始值为空字符串，不会匹配你判断的#012342
• 第一次点击后，背景色被设置为#012342（写入了style属性），此时判断条件成立，会切换回#202023；但第二次点击时，div2.style.backgroundColor的值是rgb(32, 32, 35)（浏览器会自动把十六进制颜色转成RGB格式存储），和你判断的#202023不匹配，导致逻辑失效

修复方案 #

推荐使用状态变量跟踪切换状态的方案，彻底摆脱样式值格式的浏览器差异问题，代码更稳定：

修改后的代码 #

优化后的JavaScript #

const button = document.getElementById("id_switch");
const sidebar = document.getElementById("id_sidebar");
const switchButton = document.getElementById("id_button_switch");
const sunIcon = document.getElementById("id_sun_icon");
const lightModeText = document.getElementById("id_lightMode");
const moonIcon = document.getElementById("id_moon_icon");
const darkModeText = document.getElementById("id_darkMode");

// 用状态变量跟踪深色/浅色模式
let isDarkMode = true;

button.addEventListener("click", function() {
  // 切换开关按钮位置
  switchButton.style.marginLeft = switchButton.style.marginLeft === "20px" ? "2.5px" : "20px";
  
  // 切换sidebar背景色
  sidebar.style.backgroundColor = isDarkMode ? "#012342" : "#202023";
  
  // 切换图标和文本显示
  sunIcon.style.display = isDarkMode ? "flex" : "none";
  moonIcon.style.display = isDarkMode ? "none" : "flex";
  lightModeText.style.display = isDarkMode ? "flex" : "none";
  darkModeText.style.display = isDarkMode ? "none" : "flex";
  
  // 切换状态标记
  isDarkMode = !isDarkMode;
});

优化点说明 #

• 合并多个重复的点击事件监听，提升性能
• 用状态变量isDarkMode跟踪模式状态，避免依赖样式值判断的不确定性
• 变量名语义化，代码可读性更高

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