增加img尺寸和高度onclick

Question

我正在嘗試在 javascript 中創建一個 function ，這將增加單擊的圖像的大小。 我不知道為什么它不讓我在 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

您可以在圖像的容器元素上添加單擊偵聽器，並使用事件 object 來獲取被單擊的圖像並設置其寬度和高度。

寬度和高度的值應該是字符串而不是數字

 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>

Answer 2

我在 codepen 上偷了一個圖像網格並添加了用於添加突出顯示 function 的 js。 我已經使用事件參數“e”來訪問目標（生成點擊事件的元素）並將樣式直接設置為它。 至少，您可能可以考慮使用 css 類的更好方法。

function highlight(e) {
  e.target.style.width="50px";
  e.target.style.height="80px";
}

//This line is just for adding click event using jquery, you don't need it
$('img').on('click', highlight)

https://codepen.io/SimCu/pen/abvPOwd