使用JS点击按钮，实现背景颜色的切换，效果如下

javascript改变背景 js修改背景色_html


代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>点击按钮切换背景色</title>
</head>

<body id='btn_body' style="background-color:white;">
    <button id="btn">点击更换BODY皮肤（白-》红-》绿-》蓝-》黑-》白...）</button>
</body>
<script>
    let btn = document.getElementById('btn');
    // 获取body，可以直接通过document.body
    let btn_body = document.body;
    //let btn_body = document.getElementById('btn_body');
    let i = 0;
    // 定义数组，数组内放颜色值，可以是英文，可以是十六进制，也可以是rgb格式。
    bgcArr = ['white', 'red', 'green', 'blue', 'black', '#999', 'rgb(167, 109, 109)'];
    btn.onclick = function() {
        i++;
        // 循环背景色
        i > bgcArr.length - 1 ? i = 0 : null;
        btn_body.style.backgroundColor = bgcArr[i];
    }
</script>

</html>