如何在单击时将图像大小加倍

Question

我试图做到这一点，当我点击一张图片时，图片的宽度和高度会翻倍，但每次我点击图片时，它都会消失，宽度和高度会变为 0

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

Answer 1

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

Answer 2

您必须更改为

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

因为你的函数是 imgDouble();

Answer 3

您没有明确定义图像的宽度和高度。所以，你需要先用clientWidth and 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。