使用clientHeight导致JavaScript函数失效，如何修复？

1. 修正CSS注释错误 #

CSS不支持//单行注释，仅认可/* */格式的注释。你原代码中的//会导致浏览器解析CSS出错，可能让#img1的height属性无法正常生效，进而使clientHeight获取到错误值。修改后的CSS如下：

#img1, #img2, #img3 {
  background: url("bates-sprite.jpeg");
  background-repeat: no-repeat;
  object-fit: none;
}

#img1 {
  object-position: 0 0;
  width:  816px; /* full size 3264 */
  height: 612px; /* full size 2448 */
}

2. 确保JS在DOM渲染完成后执行 #

如果JS代码在页面元素未渲染完成时就运行，#img1还未被浏览器解析渲染，clientHeight会返回0，导致计算后的高度不符合预期。可以将JS代码放在DOMContentLoaded事件回调中，或者页面最底部（</body>标签之前）：

document.addEventListener('DOMContentLoaded', function() {
  var tempDiv = document.createElement('div');
  tempDiv.setAttribute("id", "bigImg" + figNum);
  
  let imgHeight = document.getElementById("img1").clientHeight;
  // clientHeight是不带单位的数字，直接与400相加后拼接px
  tempDiv.style.height = (imgHeight + 400) + "px";
});

3. 简化高度计算逻辑 #

clientHeight本身返回的是纯数字（比如612），无需用parseInt转换。直接与400相加后拼接px即可，避免不必要的类型转换引发错误。

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