Javascript onclick事件增加和减少宽度

Question

function myFun(img) {
  img.style.width = "200px";
}

<body>
  <img src="images/img.jpg" id="test" width="100px" heigh="100px" onclick="myFun(this)">
</body>

所以代码是当我点击图片时，宽度增加100px。我想要实现的是，当我再次单击图像时，我希望它重新获得其实际宽度，即 100px。怎么办？... 谢谢。

Answer 1

您需要存储缩放状态 - 用户当前是放大还是缩小，并根据您指定的范围更改缩放状态。

const $image = document.querySelector('#test');
const delta = 50;
let zoom = +1;
$image.onclick = function() {
  const height = $image.getBoundingClientRect().height; // or $image.height
  if (height >= 500) {
    zoom = -1;
  } else if (height <= 200) {
    zoom = +1;
  }
  $image.height += zoom * delta;
}

<img src="https://media1.tenor.com/images/9f8deeccdee39a5ed36a0a7ecfa3a1a8/tenor.gif?itemid=10044706" height="200" id="test" />

Answer 2

只需在函数中使用 if/else 语句来测试宽度是否等于“200px”，然后将“100px”分配给宽度，否则分配“200px”:

function myFun(img) {
  if(img.style.width === "200px") {
    img.style.width = "100px";
  } else {
    img.style.width = "200px";
  }
}

Answer 3

当 onclick 事件发生时切换 class，当您再次单击时，class 将被删除，这样您就可以使用当前的 width

例子

function myFun(img) {
  img.classList.toggle('thatClass');
}

.thatClass {
  width: 200px;
}

<body>
  <img src="images/img.jpg" id="test" width="100px" heigh="100px" onclick="myFun(this)">
</body>

Javascript onclick事件增加和减少宽度

Javascript onclick event to increase and decrease width

html

javascript

function

onclick

例子