javascript - 重置边框样式

Question

我有一张图片，点击后正在使用 Jquery 设置样式。我最终将它隐藏在 Javascript 中。我想重新显示它，但我希望它的边框被移除。

这是 HTML:

<div id="playOptionsWager" style="display: none">
    <h4>Choose your move to beat the computer!</h4>
    <img id="clickedRockWager" src="img/rock.jpg" onclick="playWagerRock()" />
    <img id="clickedPaperWager" src="img/paper.jpg" onclick="playWagerPaper()"/>
    <img id="clickedScissorsWager" src="img/scissors.jpg" onclick="playWagerScissors()" />
</div>

J查询:

$(function () {
    $("img").on("click",function() {
        $(this).siblings().css('border','0px')
        $(this).css('border', "solid 2px red");
    });
});

这是我在 Javascript 中尝试的:

function autobet() {
    coinBalance -= currentBet*2;
    alert(getBalance());
    document.getElementsByTagName("IMG").style.border="";
}

但是当它重新显示 div 时它仍然有边框。

感谢您的帮助!

Answer 1

您的问题是 document.getElementsByTagName("IMG") 返回一个元素集合，因此仅在该集合上应用 .style.border 是行不通的。相反，您需要遍历此集合，并使用 .style.border = 0; 将其中的每个图像设置为无边框:

请参阅下面的工作示例(带有 div):

function removeBorder() {
  [...document.getElementsByTagName("div")].forEach(elem => {
    elem.style.border = 0;
  });
}

.box {
  height: 100px;
  width: 100px;
  background: black;
  display: inline-block;
}

.active {
  border: 3px solid red;
}

<div class="box"></div>
<div class="box active"></div>
<div class="box"></div>

<br />
<button onclick="removeBorder()">Remove border</button>

另请注意，[...document.getElementsByTagName("IMG")] 是一种将元素集合转换为元素数组的方法，因此我们可以使用 .forEach 方法对其进行循环。