Javascript 如何让DOM操作在图像上工作？

我正试图通过DOM操作让图像在点击时调整大小。我正在尝试以下代码，但它不起作用

var images = document.getElementsByTagName("img")

//these 12 images are stored in var 'images' but do not react when clicked.

images.addEventListener("click", function() {
    height: "500px";
    width: "500px"
});

//JS and HTML files are connected.

---

您不能通过直接

javascript

将事件处理程序附加到集合，在

jquery

中，您可以做类似的事情（但我很确定它只是通过封装来迭代集合）。您需要迭代集合，然后将事件侦听器添加到集合中的每个元素：

for(let x = 0; x < images.length; x++){
    images[x].addEventListener("click", function() {
       this.style.height = "500px";
       this.style.width = "500px";
    });
}

for（设x=0；x

您的代码有两个主要问题：

您不是将事件侦听器添加到图像中，而是将其添加到图像集合中。这不会将其添加到集合中的每个图像中，因此您必须手动执行此操作

行

高度：“500px”

是一个变量赋值，不会更改图像的样式。您必须直接设置样式

要解决这些问题，请执行以下操作：

迭代数组并将事件侦听器添加到每个图像：

直接更改图像的样式

最终结果如下所示：

for (let image of images) {
    image.addEventListener("click", function() {
       image.style.height = "500px";
       image.style.width = "500px";
    });
}

---

我在你的代码中发现了两个错误

---

1）在数组上调用

addEventListener

。

getElementsByTagName

返回一个节点数组，您需要手动在每个节点上添加事件，如下所示：

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener(...);
}

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function() {
       this.style.height = "500px";
       this.style.width = "500px";
    });
}

---

最终结果如下所示：

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener(...);
}

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function() {
       this.style.height = "500px";
       this.style.width = "500px";
    });
}

for（var i=0；i

。这两件事你都做得不对。当，我应该更快地键入：）坦白地说，我更喜欢你的答案，所以+1

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function() {
       this.style.height = "500px";
       this.style.width = "500px";
    });
}