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

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。