点击图片增大尺寸：JavaScript函数实现遇阻及rem使用问题求助

嘿，我来帮你搞定这个图片点击放大的小问题，你的代码里有几个关键的小错误，咱们一步步修正：

问题分析&修正点 #

• 错误的样式访问方式：你写了img.innerHTML.style，但innerHTML是用来操作元素内部HTML内容的，要访问元素的行内样式，直接用img.style就可以了。
• 缺少样式单位：设置宽高的时候必须指定单位（比如rem、px），只写纯数值浏览器无法识别，自然不会生效。
• 选中了错误的元素：document.querySelector(".main-textbox-about-saints-photos")只会选中页面中第一个匹配该类的图片，但你需要的是被点击的那一张，所以要在点击事件里把当前元素传进函数。

修正后的完整代码 #

HTML部分（给每个点击事件传递当前元素） #

<div class="main-textbox-about">
 <div class="main-textbox-about-saints">
 <img src="images/Saint Slide/st-peter-2176658_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-1" onclick="highlight(this);">
 <img src="images/Saint Slide/saint-stylianos-2191792_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-2" onclick="highlight(this);">
 <img src="images/Saint Slide/st-demetrius-2176682_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-3" onclick="highlight(this);">
 <img src="images/Saint Slide/archon-2086750_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-4" onclick="highlight(this);">
 <img src="images/Saint Slide/st-andrew-2176673_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-5" onclick="highlight(this);">
 <img src="images/Saint Slide/saint-john-the-baptist-1652345_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-6" onclick="highlight(this);">
 <img src="images/Saint Slide/st-paul-2176669_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-7" onclick="highlight(this);">
 </div>
</div>

JavaScript部分（接收点击元素并设置样式） #

function highlight(clickedImg) {
  // 直接操作被点击的图片元素
  clickedImg.style.height = "50rem"; // rem单位完全可以正常使用
  clickedImg.style.width = "40rem";
}

额外优化：点击其他图片恢复之前的尺寸 #

如果想要实现“点击某张图片放大，点击其他图片时恢复之前的图片尺寸”的效果，可以这样修改JS函数：

function highlight(clickedImg) {
  // 先重置所有图片的行内样式，回到CSS默认值
  const allImgs = document.querySelectorAll(".main-textbox-about-saints-photos");
  allImgs.forEach(img => {
    img.style.height = "";
    img.style.width = "";
  });
  // 再设置当前点击图片的尺寸
  clickedImg.style.height = "50rem";
  clickedImg.style.width = "40rem";
}

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