Question

我正在关注一个简单的Web开发教程，并且希望根据Rock，Paper和Scissors的结果提供一个交互式边框。如何替换（或覆盖）Rock，Paper或Scissor图像的当前CSS边框？

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

JavaScript代码（最后2行）：

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>

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

1 个答案: