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

Question

我正在尝试通过 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.

Answer 1

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

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

2. height: "500px"; 行是一个变量赋值，不会改变图像的样式。您必须直接设置样式。

要解决这些问题：

1. 遍历数组并将事件监听器添加到每个图像：

for (let image of images) {
    image.addEventListener("click", function() {
        // Code goes here
    });
}

1. 直接改变图片的样式

image.style.height = "500px";
image.style.width = "500px";

最终结果将如下所示：

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

Answer 2

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

---

1) 你在一个数组上调用addEventListener。

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

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

---

2) 您在 Javascript 上下文中输入了 CSS :)

函数的内容必须是Javascript代码而不是CSS。

这应该可行：

images[i].addEventListener("click", function() {
   this.style.height = "500px";
   this.style.width = "500px";
});

---

最终的结果是这样的：

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

Answer 3

您不能直接通过javascript 将事件处理程序附加到集合，在jquery 中您可以执行类似的操作（但我很确定它只是通过封装迭代集合）。您需要迭代集合，然后将事件侦听器添加到集合中的每个元素：

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