时间戳

首页 > 解决方案 > 重置边框样式

javascript - 重置边框样式

问题描述

我有一个图像，一旦单击它，它就正在使用 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>

查询：

$(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 时，它仍然有边框。

谢谢您的帮助！

标签： javascriptjqueryhtmlcss

解决方案

你的问题是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方法对其进行循环。

推荐阅读