Question

我正在创建我的第一个JavaScript代码，但还不太清楚。单击图像必须放大，如果再次单击则最小化。我应用了一个使它变小并且可以成功使图像变大的类。问题是，当我使用if语句时，它不会恢复为较小。实际上，它弄乱了一切，甚至不再扩大。该代码对我来说很有意义，但是显然我缺少了一些关键的东西。以下是我的代码，将不胜感激。

document.addEventListener("DOMContentLoaded", function(event) {
    var thumbnailElement = document.getElementById("smart_thumbnail");

    thumbnailElement.addEventListener("click", function() {
        thumbnailElement.className = "";

        if (thumbnailElement.className == "") {
            thumbnailElement.className = "small";
       }
    });
});

Answer 1

您可以使用classList.toggle

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function() {
  thumbnailElement.classList.toggle('toggleSize')
});

.imgContainer {
  width: 200px;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
}

.toggleSize {
  width: 400px;
  height: 400px;
  transition-duration: 1s;
}

<div id="smart_thumbnail" class="imgContainer">

  <img src="https://images.pexels.com/photos/9198/nature-sky-twilight-grass-9198.jpg?auto=compress&cs=tinysrgb&h=350">

</div>

图像Javascript从大到小调整大小，反之亦然

1 个答案: