Javascript 测量图像的大小，并使用数据大小内的宽度/高度值

我需要找到图像的宽度和高度（动态），然后将它们加载到

数据大小

元素中

它最终看起来像

data size=“768x472”

我使用了以下代码：

<script>

function realImgDimension(img) {
    var i = new Image();
    i.src = img.src;
    return {
        naturalWidth: i.width, 
        naturalHeight: i.height
    };
}

var myImage = document.getElementsByClassName('myImage');
    myImage.addEventListener('load', function() {
    var realSize = realImgDimension(this);
  console.log('My width is: ', realSize.naturalWidth);
  console.log('My height is: ', realSize.naturalHeight);
});
</script>

函数realImgDimension（img）{
var i=新图像（）；
i、 src=img.src；
返回{
自然宽度：i.宽度，
自然高度：i.身高
};
}
var myImage=document.getElementsByClassName（'myImage'）；
myImage.addEventListener（'load'，function（））{
var realSize=realImgDimension（此）；
log（'My width为'，realSize.naturalWidth）；
log（'My height is:'，realSize.naturalHeight）；
});

我在控制台中遇到的错误是

blog:741未捕获类型错误：myImage.addEventListener不是函数

---

通过谷歌搜索，我认为这是因为你不能以这种方式在Javascript中添加一个

addeventlistener

通过将图像元素（naturalWidth、naturalHeight）和图像元素（naturalWidth、naturalHeight）添加到数据大小属性中来复制图像元素的信息可能不是您真正需要的（或者您是否需要IE8支持？）-因为您始终可以直接查询image.naturalWidth和image.naturalHeight

不过，您可以按如下方式执行：

• 如何向元素添加数据大小属性？使用

  element.dataset.size=
  

• 如何将事件侦听器附加到元素？使用

  element.addEventListener（…）
  

var images=document.getElementsByClassName（“image”）；
对于（变量i=0；i{
var image=event.target；
image.dataset.size=image.naturalWidth+“x”+image.naturalHeight；
console.log（image.dataset.size）；
});
}

您正在运行什么JS（给出一个代码片段）？你说的“打印冗长”是什么意思？展示你最初的努力/代码谢谢你的提示。这会导致否决票吗？人们可能会否决票，因为您有多个问题（如何添加数据大小属性、如何向图像添加事件侦听器、如何调试我的代码），并且您无法通过谈论网格、博客条目等将您的问题隔离到某个问题中。。。这使得问题很长。谢谢@leum我已经修改了我的问题以缩小它的大小。谢谢这是一个很好的解释。我的印象是，当我使用foreach循环时，在图像上使用ID是个坏主意，因为ID应该是唯一的，即仅在一个元素上。因为这个原因，我把它换成了一门课。这有意义吗？还是我错了？很抱歉，我已经删除了[0]，但没有更新我的应答器。根据类查询图像肯定更好，id仅用于此示例。我修改了我的答案，向您展示了如何将该事件侦听器附加到getElementsByCassName（）的结果，这是一个

HTMLCollection

-对象：Gracias amigo，感谢您提供的精彩链接。我会在最后到达那里：）我仍然得到相同的错误使用您的代码<代码>未捕获类型错误：image.addEventListener不是函数。这怎么可能？我可以看到您的工作示例并查看输出-

getElementsByClassName（）将返回未定义的
。