为何addEventListener外部clientHeight返回0，点击事件内可获取正确值？

现象说明 #

给定包含可折叠免费视频内容的HTML结构及JavaScript代码：

• 在addEventListener函数外部直接打印两个DOM元素的clientHeight，控制台输出均为0；
• 点击指定触发元素后，在事件回调函数内打印这两个元素的clientHeight，能得到正确数值（403和77）。

相关代码 #

HTML代码 #

<div class="free-videos-content">
    <div>
        <div>Free Videos <span class="tri-down">&#9660;</span></div>
        <div class="span-childs">
            <span><i class="fa fa-book"></i> Checkout our Free Videos</span>
            <span> <i class="fa-solid fa-paperclip"></i> Assignments:1</span>
        </div>
    </div>

    <div class="free-videos-expand">
        <hr>
        <div><i class="fa-solid fa-square"></i> How to utilise Appliedaicourse</div>
        <hr>
        <div><i class="fa-solid fa-square"></i> Python for Data Science Introduction</div>
        <hr>
        <div><i class="fa-solid fa-square"></i> Python for Data Science: Data Structures</div>
        <hr>
        <div><i class="fa-solid fa-square"></i> Plotting for exploratory data analysis (EDA)</div>
        <hr>
        <div><i class="fa-solid fa-square"></i> Linear Algebra</div>
        <hr>
        <div><i class="fa-solid fa-square"></i> Probability and Statistics</div>
       
    </div>
</div>

JavaScript代码 #

clickToExpandFreeVideos = document.querySelector('.free-videos-content div:first-child')
expandedFreeVideos = document.querySelector('.free-videos-content .free-videos-expand')

console.log(expandedFreeVideos.clientHeight);
console.log(clickToExpandFreeVideos.clientHeight);

clickToExpandFreeVideos.addEventListener("click", () => {
    console.log(expandedFreeVideos.clientHeight);
    console.log(clickToExpandFreeVideos.clientHeight);
})

控制台输出 #

• 页面加载时：

0
0

• 点击clickToExpandFreeVideos元素后：

403
77

原因解释 #

核心原因是元素的布局计算时机问题：

1. 初始执行console.log时，浏览器还未完成元素的渲染布局：
   • 如果JS代码在DOM解析完成但CSS尚未加载生效、页面还未完成重排重绘时执行，浏览器无法计算出元素的实际高度，clientHeight返回0。
   • 另一种常见情况是.free-videos-expand初始处于折叠状态（比如CSS设置了display: none、max-height: 0等），此时元素没有实际占位，高度自然为0。
2. 点击事件触发时，页面已经完成渲染：
   • 此时元素的样式已经生效，布局已确定；如果是折叠元素，点击后会展开，浏览器会重新计算元素的布局高度，因此clientHeight能返回正确的数值。

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