如何使用JavaScript为页面img元素设置width、height属性？

以下是两种常用的实现场景，可根据你的需求选择：

• 场景1：给所有图片设置固定宽高
  如果你需要统一给所有图片指定固定的宽高值（比如300px宽、200px高），直接遍历设置属性即可：

const images = document.querySelectorAll("img");
images.forEach(img => {
  // 以下为设置HTML标签的width/height属性，单位默认是px，不需要加后缀
  img.setAttribute("width", "300");
  img.setAttribute("height", "200");

  // 如果需要设置内联样式的宽高，可使用下面的写法，和上面的属性设置二选一即可
  // img.style.width = "300px";
  // img.style.height = "200px";
});

• 场景2：给图片设置为自身原始宽高（用于避免CLS布局偏移，更推荐的用法）
  如果需要给每张图片设置它本身的真实宽高，需要读取图片的原始尺寸属性，同时做好加载容错：

const images = document.querySelectorAll("img");
images.forEach(img => {
  // 图片已经加载完成，直接读取尺寸
  if (img.complete) {
    setImageDimension(img);
  } else {
    // 等待图片加载完成后再设置尺寸
    img.addEventListener('load', () => setImageDimension(img));
    // 图片加载失败的兜底处理
    img.addEventListener('error', () => {
      img.setAttribute("width", "400");
      img.setAttribute("height", "300");
    });
  }
});

// 封装设置宽高的复用函数
function setImageDimension(img) {
  // naturalWidth/naturalHeight 为图片的原始真实宽高，不受页面样式缩放影响
  img.setAttribute("width", img.naturalWidth);
  img.setAttribute("height", img.naturalHeight);
}

注意：如果你的页面有懒加载的图片，需要在懒加载触发、图片地址赋值之后再执行上述逻辑，否则无法读取到正确的原始尺寸。

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