为何直接调用offsetHeight与控制台展开对象显示的数值不一致？

核心原因 #

1. Console的延迟求值特性：直接打印offsetHeight是代码执行瞬间的快照值，而打印DOM元素对象时，浏览器会在你展开对象的那一刻才去读取实时的属性值——这就导致你看到的展开后的值是元素布局完成后的正确高度，而代码里直接输出的是未完成渲染时的旧值。
2. 元素渲染时机不匹配：你的代码执行时，元素的样式可能还没加载完成（比如异步CSS、图片未加载导致高度未计算完成），或者DOM布局还没完成重排，此时读取的offsetHeight是未最终确定的临时值。

解决方向 #

1. 等待页面资源完全加载后执行代码 #

将逻辑放在window.load事件中，确保所有资源（包括图片、样式表）都加载完成，元素布局已稳定：

function introBackgroundSize(){
    let endpointElement = document.querySelector("div[data-bg--intro='endhere']");
    console.log(endpointElement.offsetHeight);
}
// 等待所有资源加载完成
window.addEventListener('load', introBackgroundSize);

2. 利用requestAnimationFrame等待下一次重绘 #

requestAnimationFrame会在浏览器下一次重绘前执行回调，此时元素的布局计算已经完成：

function introBackgroundSize(){
    let endpointElement = document.querySelector("div[data-bg--intro='endhere']");
    requestAnimationFrame(() => {
        console.log(endpointElement.offsetHeight); // 获取最终渲染后的高度
    });
}
introBackgroundSize();

3. 监听样式/布局变化（针对动态样式场景） #

如果元素高度是由动态添加的样式、异步CSS导致的，可以用MutationObserver监听元素的样式变化，或者等待样式加载完成：

function introBackgroundSize(){
    let endpointElement = document.querySelector("div[data-bg--intro='endhere']");
    // 监听元素样式变化
    const observer = new MutationObserver(() => {
        console.log(endpointElement.offsetHeight);
        observer.disconnect(); // 获取到值后停止监听
    });
    observer.observe(endpointElement, { attributes: true, attributeFilter: ['style'] });
}
introBackgroundSize();

4. 等待动画/过渡结束（如果有动画） #

如果元素有高度过渡动画，需要等待动画结束后再读取高度：

function introBackgroundSize(){
    let endpointElement = document.querySelector("div[data-bg--intro='endhere']");
    // 监听过渡结束事件
    endpointElement.addEventListener('transitionend', function handler() {
        console.log(endpointElement.offsetHeight);
        this.removeEventListener('transitionend', handler); // 移除监听避免重复触发
    });
}
introBackgroundSize();

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