Style.backgroundColor/background失效：div背景色未按预期更改求助

我帮你找出了导致方块背景色未变化的两个核心问题，一起来看看怎么修复：

1. RGB颜色格式错误 #

你数组里的RGB值写法不符合CSS规范，rgb和括号之间多了空格（比如 "rgb (255, 0, 0)"），浏览器无法识别这种带空格的颜色值，所以不会替换掉CSS里默认的紫色。

正确的RGB格式应该是无空格的："rgb(255, 0, 0)"

2. JavaScript执行时机不对 #

如果你的JS代码放在HTML结构之前，当代码执行时，页面里的.square元素还没加载完成，document.querySelectorAll(".square")会获取到空集合，自然无法设置背景色。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: #232323; }
        .square { width: 30%; background: purple; padding-bottom: 30%; float: left; margin: 1.6%; }
        #container { max-width: 600px; margin: 0 auto; }
        h1 { color: white; }
    </style>
</head>
<body>
    <h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
    <div id="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>

    <script>
        // 修正RGB格式：去掉rgb和括号之间的空格
        var colors = [ "rgb(255, 0, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)", "rgb(0, 0, 255)", "rgb(255, 0, 255)" ]
        var squares = document.querySelectorAll(".square");
        var pickedColor = colors[3];
        var colorDisplay = document.getElementById ("colorDisplay");
        colorDisplay.textContent = pickedColor;
        
        for(var i = 0; i < squares.length; i++){
            squares[i].style.backgroundColor = colors[i];
        }
    </script>
</body>
</html>

关键修改点说明 #

• 移除所有RGB值里rgb与括号间的空格，确保浏览器能正确解析颜色
• 将CSS代码放入<style>标签内，规范样式的写法
• 将JavaScript代码放在HTML结构末尾（</body>标签前），保证DOM元素加载完成后再执行JS，这样能正确获取到所有.square元素

这样修改后，6个方块就能显示对应的RGB颜色了！

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