点击按钮切换网站背景色异常：仅能变黑无法恢复默认

你的代码存在几个关键问题：

• 函数嵌套错误：off_contrast 被定义在 on_contrast 内部，导致外部无法正确调用这个函数
• 逻辑错误：off_contrast 里依然设置黑色背景，且错误地给 body 调用 .off()（这是解绑事件的方法，不该用在这里）
• 重复绑定点击事件：按钮同时绑定了两个点击函数，点击时两个函数会同时执行，最终只会呈现变黑的效果

下面是几种可行的修复方案：

方案1：用状态变量切换 #

通过一个变量记录当前背景状态，点击时切换状态并修改背景：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button type="button" id="button">Button for test</button>

<script type="text/javascript">
$(document).ready(function(){
    let isBlack = false;
    $('#button').click(function(){
        if(isBlack){
            // 恢复默认背景，可替换为你原本的默认颜色，比如'white'
            $('body').css('background', '');
        } else {
            $('body').css('background', 'black');
        }
        isBlack = !isBlack;
    });
}); 
</script>

方案2：用CSS类切换（更推荐） #

先定义CSS类，通过toggleClass切换背景，符合样式与逻辑分离的原则：

<style>
.dark-bg {
    background-color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button type="button" id="button">Button for test</button>

<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function(){
        $('body').toggleClass('dark-bg');
    });
}); 
</script>

方案3：直接判断当前背景颜色 #

不需要额外变量，直接读取当前背景颜色来判断切换：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button type="button" id="button">Button for test</button>

<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function(){
        const currentBg = $('body').css('background-color');
        // 浏览器返回的颜色可能是rgb格式，所以同时判断两种格式
        if(currentBg === 'rgb(0, 0, 0)' || currentBg === 'black'){
            $('body').css('background', '');
        } else {
            $('body').css('background', 'black');
        }
    });
}); 
</script>

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