gpt4 book ai didi

javascript - 重置边框样式

转载 作者:太空宇宙 更新时间:2023-11-04 06:43:00 24 4
gpt4 key购买 nike

我有一张图片,点击后正在使用 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 时它仍然有边框。

感谢您的帮助!

最佳答案

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

关于javascript - 重置边框样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53513478/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com