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

Question

我在HTML代码的一部分中编写了一个脚本，通过使用for循环将图像输出到浏览器10次。这可以正常工作，但是我还想在标记的head元素中编写脚本，在这里我可以使用函数来首先从图像元素创建HTMLCollection，然后循环遍历集合中的所有十个图像，添加5个像素单击十个图像中的任何一个时，从左到右依次调整每个后续图像元素的width和height属性。

我已经尝试研究有关HTMLCollections的信息以及与DOM相关的属性和其他方程式的组合，但是到目前为止没有成功。

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

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

当输出到浏览器时，每张图像的大小应从左到右增加5个像素（冗余表示歉意）。但是，我无法做到这一点，当我单击其中一张图像时，只能看到数字1.05。

Answer 1

这呢？

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   "/>`;              

}

当然，在style属性中使用的'base'是您设置的，例如100个像素，或者您想要第一个像素的高度和宽度是很多像素，

编辑：那只是使每张照片都比上一张大，这与您要求的不完全相同。但是您的评论使我认为我应该出于学习目的而保留它。您可以做的就是让每张图片在点击后展开，并且每张图片都比之前的图片大10像素，是这样的：

向图像添加类以轻松定位，然后将它们定位到数组中：

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

现在循环遍历元素数组，并将事件侦听器附加到每个元素。事件侦听器将根据元素在数组中的位置来更改该元素的样式元素。因此，数组后面的元素将比数组前面的元素扩展更多。这也消除了对onclick="growingPumpkins(this)"的需要，因为事件侦听器已添加到此立即调用的函数表达式（IIFE）中：

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

我认为应该这样做。您需要添加another事件侦听器，以便它们缩小到原始大小，例如mouseleave或类似的大小。希望这可以工作并且对您有所帮助。