HTML中点击按钮增减图片大小仅首图生效的解决方法

算力阿峰

2026-8-28

问题产生原因

HTML标准明确规定，同一个页面内的id属性值必须全局唯一，不允许多个元素重复使用相同id。你给三张图片都设置了id="image"，执行document.getElementById("image")时，DOM API只会返回匹配到的第一个元素，因此只有第一张图片的尺寸会被修改。
补充个小规范问题：<img>是自闭合标签，不需要额外写</img>做闭合，原有写法属于不规范HTML，虽然大部分浏览器能容错，但建议修正。

正确修改方式

首先调整HTML结构，把重复的id替换为可复用的类名，修正img标签的不规范写法：

<p><img class="adjustable-img" src="001.jpg" height="1000"></p> 
<p><img class="adjustable-img" src="002.jpg" height="1000"></p> 
<p><img class="adjustable-img" src="003.jpg" height="1000"></p> 

<button onclick="plus()">+</button>
<button onclick="minus()">-</button>

修改JS逻辑，获取所有目标图片后遍历调整尺寸：

function plus() {
  const allImgs = document.querySelectorAll('.adjustable-img');
  allImgs.forEach(img => {
    img.height += 50;
  })
}

function minus() {
  const allImgs = document.querySelectorAll('.adjustable-img');
  allImgs.forEach(img => {
    img.height -= 50;
  })
}