Image Javascript Изменение размера от большого к маленькому и наоборот - PullRequest
Новая
       17

Image Javascript Изменение размера от большого к маленькому и наоборот

0 голосов
/ 30 августа 2018

Я создаю свой первый код 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";
       }
    });
});

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете использовать 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>
...