JavaScript实现body背景色双向切换功能异常问题咨询

第一段代码的问题与修复 #

核心问题 #

1. CSS里的.body是类选择器，但HTML的<body>标签没加这个类，导致初始背景色根本没生效。
2. window.getComputedStyle()获取的背景色是RGB格式（比如rgb(34, 35, 39)），不是你写的十六进制#222327，所以条件判断永远不成立，每次都会执行else分支。

修复后代码 #

修正CSS（把类选择器改成标签选择器）

body {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #222327;
}

方案1：直接匹配RGB值

function changeBgC(){
    const body = document.querySelector('body');
    const computedStyle = window.getComputedStyle(body);
    const bgColor = computedStyle.getPropertyValue("background-color");
    // #222327对应的RGB值是rgb(34, 35, 39)
    if (bgColor === 'rgb(34, 35, 39)') {
        body.style.backgroundColor = "#29fd53";
    } else {
        body.style.backgroundColor = "#222327";
    }
}

方案2：RGB转十六进制（通用适配）

如果以后要换颜色，不用查RGB值，直接转成十六进制对比：

// 把RGB字符串转成十六进制的工具函数
function rgbToHex(rgbStr) {
    const rgbNumbers = rgbStr.match(/\d+/g).map(Number);
    return '#' + rgbNumbers.map(num => num.toString(16).padStart(2, '0')).join('');
}

function changeBgC(){
    const body = document.querySelector('body');
    const computedStyle = window.getComputedStyle(body);
    const bgHex = rgbToHex(computedStyle.getPropertyValue("background-color"));
    if (bgHex === '#222327') {
        body.style.backgroundColor = "#29fd53";
    } else {
        body.style.backgroundColor = "#222327";
    }
}

第二段代码的问题与修复 #

核心问题 #

变量i是在函数内部声明的，每次点击按钮调用函数时，i都会被重新初始化0，所以永远只会执行if分支，点击多少次都切不回去。

修复后代码 #

把变量移到函数外部，让它的状态在多次调用之间保持：

// 把状态变量放在函数外面，持久化保存
let isDarkBg = true; // 初始是深色背景#222327
function changeBgC(){
    const body = document.querySelector('body');
    if (isDarkBg) {
        body.style.backgroundColor = "#29fd53";
    } else {
        body.style.backgroundColor = "#222327";
    }
    isDarkBg = !isDarkBg; // 每次点击切换状态
}

更优方案：CSS类切换 #

这种方法不用操作style属性，更简洁好维护，还能加过渡动画：

body {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: #222327;
    transition: background-color 0.3s; /* 可选：添加平滑过渡效果 */
}

body.light-bg {
    background-color: #29fd53;
}

function changeBgC(){
    document.body.classList.toggle('light-bg');
}

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