如何用JavaScript替换CSS设置的Div背景图片？

我有多个Div元素，给它们设置了相同的类，通过CSS为该类指定背景图，显示正常。现在希望给这些Div添加onclick事件，用JavaScript更换背景图，但新背景图总是显示在旧背景图下方。

我尝试过这些方法都没解决：

• 直接在onclick函数中设置新的backgroundImage，旧背景图依然显示
• 删除CSS中的背景图设置，改用JavaScript初始化首个Div的背景图，点击事件无响应
• 设置新背景图前清空背景相关属性（backgroundImage=""、removeProperty("background-image")、background="none"），仅能看到新背景图边缘在旧图下方，问题仍未解决

不想通过新增Div配合display:none的方式解决，希望找到更简洁的方案。

相关代码 #

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    [...]
    <link rel="stylesheet" href="snake_style.css">
</head>
<body>
  <main>
    <div>
       <div id="chalA1" class="challenges bronze" onclick="giveXP('A', 1)"></div>
       <div id="chalA2" class="challenges bronze" onclick="giveXP('A', 2)"></div>
       [...]
       <div id="chalB1" class="challenges bronze" onclick="giveXP('B', 1)"></div>
       <div id="chalB2" class="challenges bronze" onclick="giveXP('B', 2)"></div>
       [...]
    </div>
    <script type="text/javascript" src="snake_script.js"></script>
  </main>
</body>
</html>

CSS

.challenges {
    background-repeat:no-repeat;
    background-position: center center;
    background-size: contain;
    display:flex;
    justify-content: center;
    align-content: center;
    margin: 0.25rem;
    padding:0;
    border: none;
}
.bronze{
    background-image: url(../../../images/backgrounds/challenge_unknown_bronze.png);
}
.silver {
    background-image: url(../../../images/backgrounds/challenge_unknown_silver.png);
}
.gold {
    background-image: url(../../../images/backgrounds/challenge_unknown_gold.png);
}

JavaScript

let chal;

function giveXP(x, n) {
[...]
     chal = document.getElementById('chal' + x + n);
     chal.style.backgroundImage = "";
     chal.style.backgroundImage = "url('../../../images/backgrounds/challenge_unknown_gold.png')";
[...]
}

核心问题是行内样式的优先级没覆盖过CSS类，或者浏览器叠加了多个背景图。最简洁的办法是通过切换类来换背景，而不是直接改行内样式。

具体修改 #

保留现有CSS的类设置，直接修改JavaScript函数：

function giveXP(x, n) {
    // [...] 你的其他逻辑
    const chal = document.getElementById('chal' + x + n);
    // 移除旧的等级类（如果有silver也可以一起加入移除列表）
    chal.classList.remove('bronze');
    // 添加目标等级类
    chal.classList.add('gold');
    // [...] 你的其他逻辑
}

为什么这个方法管用？ #

• 类样式的优先级足够覆盖原有设置，不会出现背景叠加的情况
• 不用手动清理背景属性，类切换直接替换原有背景图
• 代码更简洁，也方便后续扩展其他等级的切换

额外优化 #

如果想要平滑过渡效果，可以给.challenges加个过渡属性：

.challenges {
    /* 原有样式 */
    transition: background-image 0.3s ease;
}

如果需要实现等级递进切换，可以通过判断当前类来处理：

if (chal.classList.contains('bronze')) {
    chal.classList.remove('bronze');
    chal.classList.add('silver');
} else if (chal.classList.contains('silver')) {
    chal.classList.remove('silver');
    chal.classList.add('gold');
}

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