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

Question

我有一些来自 REST API 的 HTML。在那，我有很多标签，可能有也可能没有设置宽度和高度属性。这些单位不是“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，则使用 px 应用 width 属性，如果设置了 height 属性，则设置它。如果它们都没有设置，我们就按原样离开。

标签： javascriptjquerycss

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">