如何在点击时将图像尺寸加倍

Question

我正在尝试制作一个图像，以便当我单击图像时图像的宽度和高度加倍，但是每次单击图像时它都会消失并且宽度和高度变为0

<img src="pic1.jpg" onclick="imgDouble(this)">
<script>
 function imgDouble(x){
    x.style.width *= 2;
    x.style.height *= 2;
}
</script>

Answer 1

您尚未明确定义图像的宽度和高度。 因此，您需要使用clientWidth和clientHeight首先获取其宽度和高度，然后将其乘以2：

 function imgDouble(x){
    x.style.width = x.clientWidth * 2;
    x.style.height = x.clientHeight * 2;
}

您可以使用x.width和x.height代替x.style.width和x.style.height，还有其他选择。

或者，要确切获取图像宽度，可以使用x.naturalWidth和x.naturalHeight。

Answer 2

您可以将函数的名称从imgDouble(x)更改为imgSize(x) 。 试试看

Answer 3

您必须更改为

 <img src="pic1.jpg" onclick="imgDouble(this)">

因为您的函数是imgDouble（）;