如何使用JS获取div准确内容高度含图片时clientHeight/offsetHeight不准原因

开发者阿泽

2026-10-6

问题原因

浏览器的DOM解析和静态资源加载是异步执行的：

浏览器解析HTML构建DOM树时，遇到<img>标签只会异步发起图片资源请求，不会等待图片加载完成再继续解析后续内容，也不会等图片加载完成再执行内联JS脚本。
你当前的JS代码直接写在</body>标签之前，执行时DOM树虽然已经构建完成，但图片还未加载完成，浏览器尚未获取到图片的实际渲染高度，计算clientHeight、offsetHeight时不会包含图片占用的高度，所以得到的结果小于预期值。
由于你没有给<img>标签设置固定高度属性，浏览器无法提前为图片预留占位空间，只有等图片加载完成后触发重排，才会更新容器的实际高度。

解决方案

方案1：监听页面`load`事件

window的load事件会在页面所有静态资源（包括图片、样式表、字体等）全部加载完成后触发，此时所有元素的渲染尺寸已经计算完毕，拿到的高度就是准确值：

window.addEventListener('load', () => {
  const container = document.querySelector(".container");
  console.log(container.clientHeight);
  console.log(container.offsetHeight);
});

方案2：单独监听目标图片的`load`事件

如果不需要等所有资源加载完成，只需要等容器内的图片加载完成就计算高度，可以单独给图片绑定加载事件：

const targetImg = document.querySelector(".logo img");
const container = document.querySelector(".container");

// 图片加载成功后计算高度
targetImg.addEventListener('load', () => {
  console.log(container.clientHeight);
  console.log(container.offsetHeight);
});

// 处理图片加载失败的边界情况
targetImg.addEventListener('error', () => {
  // 此处可写兜底逻辑，比如使用默认高度
  console.log('图片加载失败');
});