检测并调整动态HTML中图像的宽度和高度

Question

我有一些来自REST API的HTML。在那，我有很多标签，可能设置也可能没有设置width和height属性。单位不是“ px”，而是数字。

<img class="embedded-image" src="http://example.com/img.svg" height="150" 
width="200">

<img class="embedded-image" src="http://example.com/img.svg" height="150">

<img class="embedded-image" src="http://example.com/img.svg" width="200">

<img class="embedded-image" src="http://example.com/img.svg">

使用CSS或JavaScript，我希望定位这些“ img”标签，如果设置了px，则将width属性应用于px，如果设置了height属性，则将其设置。如果未设置它们，我们将保持原样。

Answer 1

假设您已经将它们添加到DOM中，则可以循环浏览并仅查看宽度和高度是否存在。

var _imgs = document.querySelectorAll(".embedded-image");
_imgs.forEach(function(el){
  if(el.getAttribute("height") != null){
    el.style.height = el.getAttribute("height") + "px";
  }
  
  if(el.getAttribute("width") != null){
    el.style.width = el.getAttribute("width") + "px";
  }
});

<img class="embedded-image" src="http://example.com/img.svg" height="150" 
width="200">

<img class="embedded-image" src="http://example.com/img.svg" height="150">

<img class="embedded-image" src="http://example.com/img.svg" width="200">

<img class="embedded-image" src="http://example.com/img.svg">