时间戳

首页 > 解决方案 > 如何在点击时更改 img 大小，并在使用 javascript 切换时将其恢复正常？

javascript - 如何在点击时更改 img 大小，并在使用 javascript 切换时将其恢复正常？

问题描述

我希望 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%;
    }

标签： javascripthtmlcsstogglegetelementsbytagname

解决方案

这是一个使用转换的更简单的示例。只需在点击时切换一个类。

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"/>

推荐阅读