javascript - 单击鼠标获取图像的宽度和高度

Question

我想在点击时获取图像的宽度和高度。下面是我的代码:

$(".sim-row-edit-img").click(function(){
	alert("Image clicked, width is __px and height is __px");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img class="sim-row-edit-img" border="0" alt="W3Schools" src="http://icons.iconarchive.com/icons/dtafalonso/android-l/256/WhatsApp-icon.png" width="100" height="100">

我想要图像的尺寸，而不是我在 img attr 中编写的 width="100"height="100" 标签。

Answer 1

您应该向回调函数传递一个参数，然后访问事件的 target 及其 naturalWidth 和 naturalHeight 属性，如下所示:

$(".sim-row-edit-img").click(function(e){
	alert("Image clicked, width is "+e.target.naturalWidth+"px and height is "+e.target.naturalHeight+"px");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img class="sim-row-edit-img" border="0" alt="W3Schools" src="http://icons.iconarchive.com/icons/dtafalonso/android-l/256/WhatsApp-icon.png" width="100" height="100">