为什么获取id为d的div的clientHeight结果不是预期150px？

读取到的clientHeight不符合预期，由三个常见的前端渲染机制问题共同导致：

• JS执行时机早于图片渲染：浏览器解析HTML时会优先构建DOM树，遇到img标签仅发起资源请求，不会阻塞后续JS执行。如果读取高度的JS在图片资源下载、渲染完成前运行，#d容器还未被图片内容撑开，拿到的高度自然不是150px。如果JS代码写在#d节点之前，甚至会因为DOM还未解析到对应元素直接报错或拿到0值。
• 百分比高度样式失效：给img设置的height:100%不满足生效条件——CSS中百分比高度需要参照父元素的显式非auto高度计算，#d没有设置固定高度，默认值为auto（高度由子元素内容决定），此时img的百分比高度没有计算依据，样式规则实际不生效。
• 行内元素默认间隙干扰：img是默认的行内替换元素，会与父元素的文本基线对齐，底部默认存在3-4px的行盒留白。就算图片完全加载，不处理这个默认特性的话，读取到的容器高度会比150px多出几像素，仍然和预期值不符。

针对以上问题调整代码即可拿到准确值：

1. 将读取高度的逻辑绑定到img的onload事件中，确保逻辑执行时图片已经完成加载渲染
2. 调整img的CSS规则，消除默认行内间隙，移除无效的百分比高度设置
3. 如需提前占位，可直接在img标签上声明原生width/height属性，让浏览器在资源加载前就预留正确尺寸的空间

参考实现代码：

img {
  /* 转为块级元素消除底部基线间隙 */
  display: block;
}

<div id="d">
  <img src="https://via.placeholder.com/100x150" id="targetImg">
</div>

const targetImg = document.getElementById('targetImg')
targetImg.onload = () => {
  const containerHeight = document.getElementById('d').clientHeight
  console.log(containerHeight) // 输出150，符合预期
}

补充：如果需要兼容图片缓存场景，可判断img的complete属性，对已缓存的图片直接读取高度即可，避免onload不触发的问题。

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