单击时切换 div 大小

Question

我试图在点击时使 div 更大。 再次点击后，我想让 div 变小。 有没有办法做到这一点？ 我可以添加 animation 吗？

 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>

Answer 1

您可以使用 CSS 来处理类似transition: all .5s;的动画transition: all .5s; , 并处理大小的切换，像(map.style.height == '200px') ? "100px" : "200px";这样的三元条件(map.style.height == '200px') ? "100px" : "200px"; (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>

Answer 2

您应该执行以下操作，对于动画，您只需要为元素添加transition ：

 document.addEventListener('click', function(event) { if (!event.target.matches('.hud-map')) return; event.preventDefault(); var map = document.getElementById("hud-map"); if (map.style.width === '200px') { map.style.height = "100px"; map.style.width = "100px"; } else { 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);transition: all 200ms ease;"> </div>

Answer 3

 var isClicked = false; document.addEventListener('click', function(event) { if (!event.target.matches('.hud-map')) return; event.preventDefault(); var map = document.getElementById("hud-map"); map.style.width = (isClicked ? 100 : 200) + 'px'; map.style.height = (isClicked ? 100 : 200) + 'px'; isClicked = isClicked ? false : true; }, 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>

Answer 4

只需切换一个类并使用 css transition 来动画大小的变化

 document.querySelector('.map').addEventListener('click', function () { this.classList.toggle('large') })

 div.map { width: 100px; height: 100px; background-color: green; transition: width 1s, height 1s; } div.map.large { width: 300px; height: 300px; }

 <div class="map"></div>

Answer 5

CSS 转换似乎是这里最简单的方法； 只需在事件处理程序中添加和删除类，它应该绑定到元素而不是整个文档：

 document.getElementById("hud-map").addEventListener('click', e => { if (e.target.className.includes("hud-map-sm")) { e.target.classList.remove("hud-map-sm"); e.target.classList.add("hud-map-lg"); } else { e.target.classList.remove("hud-map-lg"); e.target.classList.add("hud-map-sm"); } });

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

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

切换单个 CSS class可能会更好，但我会在有两个单独的可能有意义的时候将其保留。