JavaScript修改div背景色失败求助：获取元素后无法生效

你代码里的核心问题是直接操作元素对象的backgroundColor属性——DOM元素的CSS样式必须通过style属性来访问，直接写color1.backgroundColor只是给元素对象添加了一个自定义属性，完全不会影响实际的页面样式。

修改方法很简单，把设置背景色的代码改成通过style属性操作即可：

var number = Math.floor(Math.random() * 19) + 1;
var img1 = document.getElementById("img1");
var color1 = document.getElementById("someInput");
if (number == 1) {
    img1.src = "golconda.jpeg";
    color1.style.backgroundColor = 'red'; // 这里添加style前缀
}

如果修改后还是不生效，可以排查这几个点：

• 确认someInput是目标div的正确id，没有拼写错误
• 检查该div的CSS是否存在带!important标记的background-color样式，这种情况需要用color1.style.setProperty('background-color', 'red', 'important')来强制覆盖
• 确保代码是在DOM完全加载后执行的（比如放在页面底部，或者绑定到DOMContentLoaded事件中）

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