如何在單擊時更改 img 大小，並在使用 javascript 切換時將其恢復正常？

Question

我希望 html 文件中的圖像大小更改 50%，並在第二次單擊時切換回正常大小。 我嘗試以與 onmouseover 相同的方式執行此操作，但它不起作用。 有沒有人對如何在 javascript 中做到這一點有任何想法？

html代碼-

   <article id="featuredartists">
        <h2>Featured Artists</h2>
        <div class="artistlist group">
            <ul class="group">
                <li><img src="images/artists/Barot_Bellingham_tn.jpg" alt="Photo of Barot Bellingham" onclick="func3()"></li>
            </ul>
        </div>
    </article>

外部javascript -

    function func3() {
       x = document.getElementsByTagName("img")[11];
       x.height = 50%;
       x.width = 50%;
    }

Answer 1

這是一個使用轉換的更簡單的示例。 只需在點擊時切換一個類。

 document.querySelector("img").addEventListener("click", function(){ this.classList.toggle("half"); });

 img { transition-duration: 0.4s; } img.half { transform: scale(0.5); }

 <img src="https://via.placeholder.com/100x100"/>

如果你真的希望它改變元素和流的大小，那么你可以改變.half類中的寬度/高度。

 document.querySelector("img").addEventListener("click", function(){ this.classList.toggle("half"); });

 img { transition-duration: 0.4s; width: 100px; height: 100px; } img.half { width: 50px; height: 50px; }

 <img src="https://via.placeholder.com/100x100"/>