javascript - 如何使用javascript将图像尺寸设置为parentNode作为属性？

Question

我需要使用javasript将图像尺寸作为atrribute添加到parentNode。但我收到Uncaught TypeError: Cannot read property 'setAttribute' of undefined, result in html is data-size="undefinedxundefined"。我究竟做错了什么？感谢您我的 JS 代码:

var imgs = document.getElementsByClassName("wp-post-image");

for (i in imgs){
       var x = imgs.naturalWidth; 
       var y = imgs.naturalHeight;       
       var sizevalue = x+'x'+y;

       imgs[i].parentNode.setAttribute("data-size", sizevalue);
}

HTML:

<a class="post-thumbnail" href="http://www.example.cs/wp-content/uploads/2020/04/hob_10458_2500px.jpg" aria-hidden="true" tabindex="-1" itemprop="contentUrl">
<img width="1000" height="750" src="http://www.example.cs/wp-content/uploads/2020/04/Job_10458_2500px.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Fotografie parfem" srcset="http://www.kasparstudio.cs/wp-content/uploads/2020/04/Job_10458_2500px.jpg 1000w, http://www.kasparstudio.cs/wp-content/uploads/2020/04/Job_10458_2500px-300x225.jpg 300w, http://www.kasparstudio.cs/wp-content/uploads/2020/04/hob_10458_2500px-768x576.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" title="hob_10458_2500px" itemprop="thumbnail"></a>

Answer 1

有几个问题:

• 不建议在数组上循环使用for in。
• 您尝试获取图像数组的 naturalWidth/naturalHeight，而不是单个图像的 naturalWidth/naturalHeight，结果返回未定义。
• 您应该使用dataset property而不是设置 data-* 属性。

var imgs = document.getElementsByClassName("wp-post-image");

for (const img of imgs){
       var x = img.naturalWidth; 
       var y = img.naturalHeight;       
       var sizevalue = x+'x'+y;

       img.parentNode.dataset.size = sizevalue;
}

console.log(document.getElementById("link").getAttribute("data-size"))

<a id="link" href="//stackoverflow.com/"><img class="wp-post-image" src="//stackoverflow.com/favicon.ico"></a>

如您所见，超链接的 data-size 属性具有预期值。