Question

我有一系列图像，我想在点击它们时用边框设置这些图像的样式。我可以使用索引编号将一个图像设置为样式，但无论何时单击它都无法在每个图像上运行该功能。我得到了一个＆＃34;无法设置＆＃39; border＆＃39;未定义的在HTMLImageElement.picStyle＆＃34;。

HTML：

<div id="pic-container">
    <img class ="dogImg" src="img/dog1.jpg">
    <img class ="dogImg" src="img/dog2.jpg">
    <img class ="dogImg" src="img/dog3.jpg">
    <img class ="dogImg" src="img/dog4.jpg">
    <img class ="dogImg" src="img/dog5.jpg">
</div>

JS：

var dogPics = document.getElementsByClassName('dogImg');

function picStyle() {
   dogPics.style.border = "1px solid black";
   }


for (var i = 0; i < dogPics.length; i++) {
   dogPics[i].addEventListener('click' , picStyle ) ; 
}

Answer 1

而不是dogPics.style.border使用this.style.border。

＆＃13;

var dogPics = document.getElementsByClassName('dogImg');

function picStyle() {
   this.style.border = "1px solid black";
   }


for (var i = 0; i < dogPics.length; i++) {
   dogPics[i].addEventListener('click' , picStyle ) ; 
}

＆＃13;

<div id="pic-container">
    <img class ="dogImg" src="img/dog1.jpg">
    <img class ="dogImg" src="img/dog2.jpg">
    <img class ="dogImg" src="img/dog3.jpg">
    <img class ="dogImg" src="img/dog4.jpg">
    <img class ="dogImg" src="img/dog5.jpg">
</div>

＆＃13;

Javascript - 数组中的样式元素

1 个答案: