点击图片实现缩放效果，如何让JS脚本识别被点击的图片元素

嘿，刚接触HTML和JS遇到这种小问题太正常啦，别着急，咱们马上就能搞定！你现在的核心问题是没有把被点击的图片元素传递给JS函数，另外还有个小细节写错了，咱们一步步来改：

第一步：给onclick传递当前图片元素 #

你现在的HTML里，只有第一个img加了onclick="script()"，但这个调用没有把点击的图片传进函数里。你只需要把它改成onclick="script(this)"——这里的this就代表当前被点击的那个<img>元素，这样JS函数就能准确拿到你点的是哪张图啦！记得给所有需要缩放的img都加上这个onclick属性哦。

修改后的HTML片段（关键部分）：

<div class="photo">
  <img onclick="script(this)" src="images/photography/image0.webp">
</div>
<div class="photo">
  <img onclick="script(this)" src="images/photography/IMG_3054.JPG"/>
</div>
<div class="photo">
  <img onclick="script(this)" src="images/photography/IMG_3094.JPG"/>
</div>
<div class="photo">
  <img onclick="script(this)" src="images/photography/IMG_3069.JPG"/>
</div>

第二步：修正JS里的缩放写法错误 #

你JS里写的img.style.transform = '50px'是不对的，缩放效果需要用scale()函数，比如scale(1.5)代表放大到1.5倍，数值可以自己调整。咱们把逻辑理清楚：

修改后的JS代码：

function script(img) {
  if (img.classList.contains('zoomed')) {
    // 如果已经是缩放状态，恢复原样
    img.style.transform = '';
  } else {
    // 如果没缩放，就放大
    img.style.transform = 'scale(1.5)';
  }
  // 切换zoomed类，方便后续判断状态
  img.classList.toggle('zoomed');
}

进阶小建议：用CSS类管理样式更清晰 #

其实咱们可以把缩放样式放到CSS里，让JS只负责切换类，这样代码更干净，后期改样式也更方便，还能加个平滑过渡动画！

先在style.css里加：

.zoomed {
  transform: scale(1.5);
  transition: transform 0.3s ease; /* 让缩放有平滑的动画效果 */
}

然后JS就可以简化成：

function script(img) {
  img.classList.toggle('zoomed');
}

这样是不是清爽多了？而且动画效果也让交互更友好～

备注：内容来源于stack exchange，提问作者Trainhead