javascript - 单击时增加图像尺寸和高度

Question

我正在尝试在 JavaScript 中创建一个函数，该函数将增加单击的图像的大小。我不知道为什么它不允许我在 javascript 中使用 rem，但是当我拿走 rem 时，数字本身仍然不起作用。

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

function highlight() {
    var img = document.querySelector(".main-textbox-about-saints-photos")
    img.innerHTML.style.height = 50;
    img.innerHTML.style.width = 40;
}

Answer 1

您可以在图像的容器元素上添加点击监听器，并使用事件对象来获取被点击的图像并设置其宽度和高度。

宽度和高度的值应该是字符串而不是数字

const imgContainer = document.querySelector('.main-textbox-about-saints');

imgContainer.addEventListener('click', (e) => {
  e.target.style.height = '150px';
  e.target.style.width = '150px';
});

<div class="main-textbox-about">
  <div class="main-textbox-about-saints">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
  </div>
</div>

编辑

根据您的评论，您一次只想要一张大图像。您可以通过跟踪先前放大的图像并在发生点击事件时重置其宽度和高度来实现此目的

const imgContainer = document.querySelector('.main-textbox-about-saints');
let prevEnlargedImg;

imgContainer.addEventListener('click', (e) => {
  if (prevEnlargedImg) {
    prevEnlargedImg.style.height = '100px';
    prevEnlargedImg.style.width = '100px';
  }

  prevEnlargedImg = e.target;

  e.target.style.height = '150px';
  e.target.style.width = '150px';
});

<div class="main-textbox-about">
  <div class="main-textbox-about-saints">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
  </div>
</div>