Javascript 如何将for循环中的每个连续图像增加5个像素

我在HTML代码的一部分编写了一个脚本，使用for循环将图像输出到浏览器10次。这很好，但我还想在标记的head元素中编写一个脚本，我可以使用一个函数首先从image元素创建一个HTMLCollection，然后循环遍历集合中的所有十个图像，单击十幅图像中的任何一幅时，从左到右向每个后续图像元素的宽度和高度属性添加5个像素

我曾试图结合DOM相关属性和其他等式来研究HTMLCollections的信息，但到目前为止都没有成功

来自body元素的脚本

<section>

    <h2>Growing Pumpkins</h2>

    <p id="smashingPumpkins" onclick="growingPumpkins(this)" ></p>      

    <script>           

        for (var i = 0; i < 10; i++) {                

            document.getElementById("smashingPumpkins").innerHTML += "<img src='bandit.png' />";              

        }

    </script>

</section>

种植南瓜

对于（var i=0；i<10；i++）{
document.getElementById（“smashingPumpkins”）.innerHTML+=“”；
}

来自head元素的脚本：

<script>        

    function growingPumpkins(img) {

        var img = document.images;

        for (index in img) {                

            document.getElementById("smashingPumpkins").innerHTML = img[index].style.width + 1.05;
            document.getElementById("smashingPumpkins").innerHTML = img[index].style.height + 1.05;
        }
    }        

</script>

功能性生长南瓜（img）{
var img=document.images；
对于（img中的索引）{
document.getElementById（“smashingPumpkins”）.innerHTML=img[index].style.width+1.05；
document.getElementById（“smashingPumpkins”）.innerHTML=img[index].style.height+1.05；
}
}        

当输出到浏览器时，每个图像的大小应该从左到右增加5个像素（为冗余道歉）。但是，我一直无法完成这项工作，当我单击其中一张图像时，只能看到数字1.05。

这是怎么回事

for (var i = 0; i < 10; i++) {                

  document.getElementById("smashingPumpkins").innerHTML += 
    `<img src='bandit.png' style="width:${base + i*5}px; height:${base + i*5}px   "/>`;              

}

---

我认为应该这样做。您需要添加另一个事件侦听器，以便它们缩小到原始大小，如

mouseleave

或类似的内容。希望这能起作用并且很有帮助。

将5px乘以

索引

？我在循环中的什么地方可以这样做？它可以工作，但预点击循环中的图像仍然存在。我如何删除它们/oops我的答案只是如何使每个图像比上一个图像大10px，与点击它无关。让我编辑我的答案

for (var i = 0; i < 10; i++) {                
  document.getElementById("smashingPumpkins").innerHTML +=
    "<img src='bandit.png' class="expandingImg" />";              
}

var images = document.querySelectorAll('.expandingImg') // creates an array of your image elements

(function growingPumpkins() {
  for (let i = 0; i < images.length; i++) {                
     images.addEventListener('click', function(){
       images[i].style = `style="width:${base + i*5}px; height:${base + i*5}px`
     }, false)
})()