Javascript 如何使用java脚本获取具有相同id的多个图像的高度和宽度

我正在尝试获取具有相同id的多个图像的宽度和高度。我正在将一个矩形图像拖放到画布中。对于第一个图像，我可以得到高度和宽度。当我拖放第二个矩形图像时，我无法获得新图像的宽度和高度。它在控制台中显示旧图像值。但在屏幕上，其高度和宽度各不相同。我需要两种价值观

以下是我的HTML代码：

<li><span id="drag1" class="drag"><img id="vino" src="images/rect-1.png" onmouseout="bigImg(this)" width="100%" height="100%" /></span><span>Item 1</span> </li>

<!--script-->
   function bigImg(x) {
   var img = document.getElementById('vino'); 
   var width = img.clientWidth;
   var height = img.clientHeight;
   console.log("function called");
   console.log(width);
   console.log(height);
     }
</script>

第1项
函数bigImg（x）{
var img=document.getElementById（'vino'）；
变量宽度=img.clientWidth；
变量高度=img.clientHeight；
log（“调用的函数”）；
控制台。原木（宽度）；
控制台。原木（高度）；
}

DOM元素应该具有唯一的ID，您应该为这些元素提供一个通用的类名

然后，如果找到多个元素，选择器应该返回一个元素数组，遍历该DOM元素数组并获得所需的属性，如宽度和高度

$('.dragMe').each(function(){
  var height = $(this).height();
  var outerHeight = $(this).outerHeight();
  var innerHeight = $(this).innerHeight();
  ...... 
});

更新：如果您想获取当前元素的高度和宽度的图像。然后使用jQueryUID&D，类名为
drop
的DOM元素将接收您拖动的图片

$(".drop").droppable({ accept: ".block", 
  drop: function(ev, ui) { 
     console.log(ui.draggable);         
  }
});

ui.draggable
是删除的元素，您将获得其属性，然后
多个图像不能具有相同的id。id的概念是唯一标识一个元素。使用同一个类来处理它。