1

I want to get the width and height of the image on click. Below is my code:

$(".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">

I would like the dimensions of the image and not the width="100" height="100" tag I have written in img attr.

halfer
  • 19,824
  • 17
  • 99
  • 186
user2828442
  • 2,415
  • 7
  • 57
  • 105

1 Answers1

3

You should pass an argument to the callback function and then access the target of the event and its naturalWidth and naturalHeight properties, like so:

$(".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">
Angelos Chalaris
  • 6,611
  • 8
  • 49
  • 75