JavaScript if 语句，条件是特定高度的 HTML 元素

Question

令我有点困扰的是，我找不到任何方法在 JavaScript 上插入引用 HTML 元素数据的 if - else 语句。 我的目标是设置一个“onclick”函数，该函数会以 200 毫秒的延迟放大图像，以及另一个使图像恢复正常的函数，始终为“onclick”。 到目前为止我的代码是:

function big() {
  setTimeout(function trigger() {
    document.getElementById("p2").style.height = "300px";
    document.getElementById("p2").style.width = "300px";
  }, 200)
}

function normal(x) {
  x.style.height = "100px";
  x.style.width = "100px";
}

<img onclick="big(this)" onclick="normal(p2)" src="http://www.clipartbest.com/cliparts/yck/aqg/yckaqgdcE.jpeg" id="p2" height="100px" width="100px" />

我需要的是一段代码，其中规定:如果图像在单击时为 100 像素高，则将其放大到 600 像素，但如果在图像高为 600 像素时单击，则将其再次折叠为 100 像素。

管理点击的功能，只需点击一下，我就可以放大图像(如果小)，如果大则缩小。

由于我编码的延迟，过渡是可能的，但我似乎找不到任何表达式来阐明高度系数。 可能吗？

Answer 1

是的，确实有可能。只需使用一个包含逻辑的函数，通过单击即可调用该函数，如下所示:

function myFunction(img) {
  img.style.transition = "all .2s";
  if (img.height == "100") {
    img.style.height = "600px";
    img.style.width = "600px";
  } else{
    img.style.height = "100px";
    img.style.width = "100px";
  }
}

<img onclick="myFunction(this)" src="http://www.clipartbest.com/cliparts/yck/aqg/yckaqgdcE.jpeg" id="p2" height="100px" width="100px" />