javascript - javascript在点击时使div变大或变小

Question

嘿，我正在尝试让 div 在单击时变大，如果再次单击变小，我只是想知道是否有办法做到这一点？我可以添加动画吗？

document.addEventListener('click', function(event) {
  if (!event.target.matches('.hud-map')) return;
  event.preventDefault();
  var map = document.getElementById("hud-map");
  map.style.height = "200px";
  map.style.width = "200px";
}, false);

<div id="hud-map" class="hud-map" style="width: 100px; height: 100px;
 border-radius: 1em; color: rgb(211, 84, 0); border: 2px solid rgb(0, 0, 0);">

</div>

对不起我的英语不好

标签： javascript

Answer 1

您可以使用 CSS 来处理类似的动画transition: all .5s;，并处理大小的切换，例如(map.style.height == '200px') ? "100px" : "200px";

document.addEventListener('click', function(event) {
  if (!event.target.matches('.hud-map')) return;
  event.preventDefault();
  var map = document.getElementById("hud-map");
  map.style.height = (map.style.height == '200px') ? "100px" : "200px";
  map.style.width = (map.style.width == '200px') ? "100px" : "200px";
}, false);

#hud-map {
  width: 100px;
  height: 100px;
  border-radius: 1em;
  color: rgb(211, 84, 0);
  border: 2px solid rgb(0, 0, 0);
  transition: all .5s;
}

<div id="hud-map" class="hud-map">
</div>