如何使用JS的document.images实现多张图片点击单独放大效果

你的现有代码问题出在固定使用document.images[0]选中页面内的第一张图片，没有匹配实际点击的目标图片，才会出现点击任意图片都仅放大第一张的问题。以下是两种基于document.images的实现方法：

方法1：手动传入索引适配少量图片 #

如果页面内图片数量少，可以直接在点击事件调用时传入当前图片的索引，在函数内通过索引取对应图片操作：

修改后的JS代码 #

function iw(index){
    // 通过传入的索引获取当前点击的图片
    var currentImg = document.images[index];
    if (currentImg.style.width == '300px') {
        currentImg.style.width = '500px';
    } else {
        // 可选逻辑：再次点击缩回原尺寸
        currentImg.style.width = '300px';
    }
}

修改后的HTML图片标签 #

<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;"  onclick="iw(0)">
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;"  onclick="iw(1)">

按顺序给每张图片的onclick传入和排列顺序匹配的索引即可，索引从0开始计数。

方法2：批量绑定事件适配任意数量图片 #

如果图片数量多、或会动态新增图片，推荐直接批量给所有document.images内的图片绑定点击事件，不需要在HTML标签内写onclick属性，后续新增图片也不需要手动改代码：

完整JS代码 #

// 页面加载完成后自动绑定所有图片的点击事件
window.onload = function() {
    // 遍历document.images里的所有图片
    for(let i = 0; i < document.images.length; i++) {
        document.images[i].onclick = function() {
            // this直接指向当前被点击的图片
            if(this.style.width == '300px') {
                this.style.width = '500px';
            } else {
                this.style.width = '300px';
            }
        }
    }
}

修改后的HTML图片标签 #

不需要保留onclick属性，直接写即可：

<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;">
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;">

内容的提问来源于stack exchange，提问作者Nishant