javascript - 如何使用 Javascript 替换 HTML 中的 CSS 边框？

Question

我正在学习一个简单的 Web 开发教程，并希望根据石头剪刀布的结果设置交互式边框。如何替换(或覆盖)剪刀石头布图像的当前 CSS 边框？

根据教程解决方案如代码所示。然而，这是我得到的结果:https://ibb.co/wBFG2cQ (对不起，我不允许直接嵌入图像)。这是预期的结果:https://ibb.co/tB7HvWX .最后，一个指向托管在免费托管网站上的网站的链接，所有源代码都可以查看 https://rockpaperscissors-ndsamu.netlify.com/ .

JavaScript 代码(最后两行):

function win(userChoice, computerChoice) {
    userScore++;
    userScore_span.innerHTML = userScore;
    result_p.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(computerChoice)}. You win!`;
    document.getElementById('crown').style.left="-100px";
    document.getElementById('crown').style.display="block";
    document.getElementById(userChoice).classList.add('green-glow');
    setTimeout(function() { document.getElementById(userChoice).classList.remove('green-glow') }, 1000);
}

CSS 代码(每张图片):

.choice {
    border: 4px solid #25272E;
    border-radius: 50%;
    margin: 0 20px;
    padding: 15px;
    display: inline-block;
    transition: all 0.3s ease;
}

CSS 代码(获胜):

.green-glow {
    border: 4px solid #4DCC7D;
    border-radius: 50%;
    box-shadow: 0 0 10px #3DA364;
}

相反，我希望绿色圆形边框替换或覆盖当前边框而不是出现在其中。

提前致谢!

Answer 1

如果没有看到您的完整代码，很难判断是什么原因造成的。我最好的猜测是 padding: 15px 是罪魁祸首。如果是，那么也许可以尝试添加 * { box-sizing: border-box; 添加到您的 CSS，看看是否能解决问题。

这里有一些代码展示了如何做他们正在做的事情，它已经被简化了。您可以通过点击来激活一个圈子。

function win(userChoice, computerChoice) {
  document.getElementById(userChoice).classList.add("green-glow");
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove("green-glow");
  }, 1000);
}

// seimple way to pick a random element
document.getElementById("choice1").addEventListener("click", function() {
  win("choice1", "");
});
document.getElementById("choice2").addEventListener("click", function() {
  win("choice2", "");
});
document.getElementById("choice3").addEventListener("click", function() {
  win("choice3", "");
});

.row {
  display: block;
}

.circle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 4px solid #25272e;
  border-radius: 50%;
  margin: 0 20px;
  padding: 0;
  transition: all 0.3s ease;
}

.circle.green-glow {
  border: 4px solid #4dcc7d;
  border-radius: 50%;
  box-shadow: 0 0 10px #3da364;
}

<div class="row">
  <div id="choice1" class="circle">
  </div>
  <div id="choice2" class="circle">
  </div>
  <div id="choice3" class="circle">
  </div>
</div>