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

how to get height and width of multiple image with same id using java script

本文关键字：图像 高度 ID 脚本 Java 何使用 获取      更新时间：2023-09-26

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

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&D，类名为 drop 的 DOM 元素是将接收拖动图片的元素。

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

ui.draggable是删除的元素，然后获得其属性

相关文章：