Javascript - 数组中的样式元素

Question

我有一组图片，我想在点击这些图片时为其添加边框。我可以使用索引号为一张图像设置样式，但似乎无法在每张图像上单击时运行该功能。我收到“无法设置未定义的‘边框’属性 在 HTMLImageElement.picStyle”。

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

使用 this.style.border 代替 dogPics.style.border。

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 ) ; 
}

<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>