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

Question

我正在创建我的第一个 JavaScript 代码，但不太明白某些事情。单击一次图像必须放大，再次单击则必须最小化。我应用了一个最初使它变小的类，并且可以成功地使图像变大。问题是，当我使用 if 语句时，它不会恢复为 small。它实际上弄乱了一切，甚至不再扩大。该代码对我来说很有意义，但显然我遗漏了一些重要的东西。以下是我的代码，如有任何帮助，我们将不胜感激。

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>