检测和调整动态 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 应用宽度属性，如果设置了高度属性。如果它们都没有设置，我们就按原样离开。

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