Question

我需要找到图像的宽度和高度（动态），然后将它们加载到data-size元素中。

它最终会看起来像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>

我在我的控制台中遇到的错误是blog:741 Uncaught TypeError: myImage.addEventListener is not a function

从谷歌搜索我认为是因为你无法在Javascript中以这种方式添加addeventlistener。

Answer 1

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

不过，你可以这样做：

如何将data-size属性添加到元素中？使用 element.dataset.size = ...;
如何将事件侦听器附加到元素？使用element.addEventListener(...);

var images = document.getElementsByClassName("image");

for (var i = 0; i < images.length; ++i) {
  images[i].addEventListener("load", (event) => {
    var image = event.target;
    image.dataset.size = image.naturalWidth + "x" + image.naturalHeight;
    console.log(image.dataset.size);
  });
}

<image class="image" src="https://i.stack.imgur.com/rGMoC.png">
<image class="image" src="https://www.gravatar.com/avatar">

您的代码可能会失败，因为document.getElementsByClassName('myImage')会返回没有addEventListener()方法的HTMLCollection - 只有单个元素。

如果要将上面的事件监听器附加到具有类'myImage'的所有图像，则需要迭代var images = document.getElementsByClassName('myImage');的结果并将上面的事件监听器添加到所有单个图像而不是第一个（{1} {1}}）。

测量图像的大小，并使用数据大小

1 个答案: