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

Question

我一直有点困扰我，

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

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" />

我需要的是一段代码，说明：如果图像在点击时高 100px，请将其放大到 600px，但如果在 600px 高时单击，请再次将其折叠为 100px。

一种管理点击的功能，如果很小，我可以放大图像，如果大，只需单击一下，就可以让它变小。

由于我编码的延迟，过渡是可能的，但我似乎找不到任何表达式来澄清高度因素。可能吗？

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" />

Answer 2

不能在

具有onclick属性的同一元素上附加两次onclick事件。

而且，您可以只使用一个函数来调整图像大小

，而不是使用两个函数来调整图像大小width然后height相应地调整其大小。

这是应该如何定义您的函数：

function resize(image) {
  if (image.style.width === "100px" && image.style.height === "100px")
    setTimeout(function() {
      document.getElementById("p2").style.height = "300px";
      document.getElementById("p2").style.width = "300px";
    }, 200)
  else {
    image.style.height = "100px";
    image.style.width = "100px";
  }
}

演示：

function resize(image) {
  if (image.style.width === "100px" && image.style.height === "100px")
    setTimeout(function() {
      document.getElementById("p2").style.height = "300px";
      document.getElementById("p2").style.width = "300px";
    }, 200)
  else {
    image.style.height = "100px";
    image.style.width = "100px";
  }
}

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

注意：

setTimeout的回调函数不需要给名字，就可以去掉trigger了。

Answer 3

尝试在 JavaScript 中遵循代码

function toggle(x) {
  if (x.style.height == "100px") {
    x.style.height = "300px";
    x.style.width = "300px";
  } else {
    x.style.height = "100px";
    x.style.width = "100px";
  }
}

这个在 HTML 中

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

Answer 4

你可以

使用 jquery 来实现这一点。

$(function (){
  $(".imgSizeToggle").on('click',function (){
    if($(this).width() < 300){$(this).stop().animate({height:'300px',width:'300px'});}
    else{$(this).stop().animate({height:'100px',width:'100px'}); }
  });
})

并在图像元素上使用 CSS 类

<img src="http://www.clipartbest.com/cliparts/yck/aqg/yckaqgdcE.jpeg" class="imgSizeToggle" height="100px" width="100px" />

演示：https://plnkr.co/edit/UPvYJiieeBcnQbUORBUx?p=preview