时间戳

首页 > 解决方案 > 用JS改变高度onclick并恢复正常

javascript - 用JS改变高度onclick并恢复正常

问题描述

我是新来的。

当我单击它们时，我试图更改图片的高度，然后当我再次单击它们时，它们会返回到原始高度。我试图通过使用相同的 CSS 类、for 循环和 if/else 来做到这一点。

我的图像 html 是这样的几次：

var element = document.getElementsByClassName("imgclasstosize");

for(var i = 0; i < element.length; i++) {
    var element = element[i];
    element.onclick = function() {

        if (element.style.height == "500px") {
            element.style.height = "200px";
        } else {
            element.style.height = "500px";
        }
    }
}  
<img class="imgclasstosize" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

<img class="imgclasstosize" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

我只能为第一张图片做我想要的行为。所有其他人都不这样做。你能帮我知道我做错了什么吗？

提前致谢

标签： javascriptfor-loopif-statementonclickaddeventlistener

解决方案

您可以使用 选择所有元素querySelector，也可以保留getElementsByClassName()。然后遍历每个图像并添加事件监听器：

var element = document.querySelectorAll('.imgclasstosize');

element.forEach(el => {
  el.addEventListener('click', function(event) {
    if (event.target.style.height == '500px') {
      event.target.style.height = '200px';
    } else {
      event.target.style.height = '500px';
    }
  });
});
<img class="imgclasstosize" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

<img class="imgclasstosize" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

推荐阅读