Question

我正在尝试获取具有相同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>

Answer 1

DOM元素应该具有唯一的ID，您应该做的是为这些元素设置一个公共类名。

<li class="dragMe" ....></li>

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

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

更新：如果要获取当前元素的已删除图像的高度和宽度。然后使用jQuery UI D＆amp; D，类名为drop的DOM元素是接收拖动图片的元素。

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

ui.draggable是被删除的元素，然后你得到它的属性

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

1 个答案: