如何通过JavaScript代码修改元素的CSS背景图片？

通过JS修改元素背景图，核心是操作DOM元素的style.backgroundImage属性，赋值规则和CSS中background-image属性完全一致，不会干扰你在.indicator类中已经设置的其他样式（比如定义的黄色背景色、grid布局属性）。

不同场景的实现代码 #

替换为新的背景图片 #

右键触发时替换为目标图片，注意先阻止浏览器默认右键菜单，避免弹出系统自带右键菜单影响交互：

indicator.oncontextmenu = function(e) {
  // 阻止默认右键行为
  e.preventDefault();
  // 替换为新背景图，将路径替换为你实际的新图片地址即可
  indicator.style.backgroundImage = 'url(./你的新图片路径.jpg)';
  alert('msg');
}

移除原有背景图，显示纯色背景 #

如果需求是触发事件后清空背景图，只显示CSS里预设的黄色背景，直接给backgroundImage赋值为none即可：

indicator.oncontextmenu = function(e) {
  e.preventDefault();
  // 移除背景图，保留类样式中设置的黄色背景
  indicator.style.backgroundImage = 'none';
  alert('msg');
}

注意事项 #

• 不推荐直接修改style.background简写属性：background是所有背景相关样式的简写属性，给它赋值时会把未显式声明的子属性（background-color/background-size/background-repeat/background-position等）重置为浏览器默认值，会冲掉你在CSS类中设置的黄色背景，除非你需要一次性重置所有背景相关样式，否则优先操作单独的backgroundImage属性。
• 如果需要频繁切换多套背景样式，更推荐提前定义好对应CSS类，通过类名切换实现样式修改，做到样式和逻辑分离，示例如下：

/* 提前定义带新背景的类 */
.indicator.new-bg {
  background-image: url(./new-image.jpg);
}

indicator.oncontextmenu = function(e) {
  e.preventDefault();
  // 添加/移除类即可切换背景
  indicator.classList.toggle('new-bg');
  alert('msg');
}

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