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>

jQuery：

$(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方法对其进行循环。

Answer 2

您从jQuery开始，让我们继续jQuery。

function autobet() {
    coinBalance -= currentBet*2;
    alert(getBalance());
    $("img").css("border","");
}

问题是getElementsByTagName()返回的集合不是一个元素。

Answer 3

首先，您需要遍历拥有的html元素的集合-使用getElementsByTagName时，您将获得一个元素数组。其次，您需要将元素的样式设置为零。

const divElements = document.getElementsByTagName("IMG");
for (let i=0; i < divElements.length; i++) {
  divElements[i].style.border = 0;
}

您可以在stackbliz上看到代码- https://stackblitz.com/edit/border-issue?file=index.js

重置边框样式

3 个答案: