为何我的代码无法修改div元素的颜色？

嘿，我来帮你搞定这个问题！你现在的核心问题是只给body切换了类，但没有让.contant元素的样式和body的类关联起来，另外还有个小拼写错误需要修正，具体来看：

问题点拆解 #

• 样式未联动：你当前给.contant写的是固定的background-color: red;，不管body加什么类，这个div的背景色都不会变。得设置当body拥有不同颜色类时，.contant对应的背景色才行。
• 拼写错误：第三个li的datacolor属性值写成了purbal，但CSS里对应的颜色是purple，这会导致点击第三个颜色块时，添加的类名和样式不匹配，无法生效。
• 冗余代码：你定义的colorLesit数组在代码里根本没用到，完全可以删掉，让代码更清爽。

修正后的完整代码 #

完整可运行代码

<head>
    <title>changecolor</title>
    <style>
        * { box-sizing: border-box; }
        .gange-color { margin-left: 40%; }
        ul li { display: inline-block; list-style: none; width: 30px; height: 30px; margin: 30px auto; cursor: pointer; }
        ul li:first-child { background-color: red; }
        ul li:nth-child(2) { background-color: green; }
        ul li:nth-child(3) { background-color: purple; }
        ul li:last-child { background-color: black; }
        
        /* 新增：根据body的类动态改变h3和.contant的颜色 */
        body.red h3 { color: red; }
        body.green h3 { color: green; }
        body.purple h3 { color: purple; }
        body.black h3 { color: black; }
        
        body.red .contant { background-color: red; }
        body.green .contant { background-color: green; }
        body.purple .contant { background-color: purple; }
        body.black .contant { background-color: black; }
        
        .contant { padding: 30px; }
        .contant h4 { color: white; font-size: 17px; }
    </style>
</head>
<body>
    <div class="gange-color">
        <ul>
            <li datacolor='red'></li>
            <li datacolor='green'></li>
            <li datacolor='purple'></li> <!-- 修正拼写：purbal → purple -->
            <li datacolor='black'></li>
        </ul>
    </div>
    <h3>TWFSRG</h3>
    <div class="contant">
        <h4>TESTINH</h4>
    </div>

    <script>
        var el = document.querySelectorAll('.gange-color ul li');
        for (var i = 0; i < el.length; i++) {
            el[i].addEventListener('click', function() {
                // 先移除所有颜色类
                document.body.classList.remove('red', 'green', 'purple', 'black');
                // 添加当前点击元素对应的颜色类
                document.body.classList.add(this.getAttribute('datacolor'));
            });
        }
    </script>
</body>

修复说明 #

1. CSS部分：新增了body.颜色类 h3和body.颜色类 .contant的样式规则，这样当body切换类时，h3的文字颜色和.contant的背景色会跟着一起变化。
2. HTML部分：把第三个li的datacolor值从purbal改成purple，和CSS里的颜色名称对应上。
3. JS部分：删掉了没用的colorLesit数组，简化了代码逻辑，功能保持不变。

现在点击不同颜色的小方块，.contant的背景色就会跟着切换啦！

内容的提问来源于stack exchange，提问作者Eng-Mohammed Hassan