如何获取img标签自身宽高属性而非图片实际尺寸并完成赋值

要获取<img>标签自身声明的宽高属性（而非图片资源原始尺寸、页面渲染后实际尺寸），可以通过getAttribute()直接读取标签的内置属性，再对应赋值即可，完整实现代码如下：

const images = document.querySelectorAll("img");

images.forEach(e => {
  // 读取img标签自身设置的宽高属性值
  const tagWidth = e.getAttribute('width');
  const tagHeight = e.getAttribute('height');

  // 仅当属性存在时赋值，避免覆盖原有配置
  if (tagWidth) e.width = Number(tagWidth);
  if (tagHeight) e.height = Number(tagHeight);
})

注意事项 #

• 该方法读取的是直接写在<img>标签上的width/height属性值，标签未声明对应属性时会返回null，不会读取浏览器计算值、图片资源的原始尺寸。
• 上述代码默认适配HTML规范中img标签宽高属性为无单位像素值的场景，如果你的项目中存在带非像素单位的非标准属性写法，需要额外对读取到的属性值做单位转换处理后再赋值。

内容的提问来源于stack exchange，提问作者MrHow