获取.bottom类元素组最高高度异常的问题排查

需求 #

获取所有拥有.bottom类的元素中的最高高度，将所有该类元素的高度统一设置为该值。

现有代码 #

equalHeight(){
    const newsBlokken = document.querySelectorAll('#news .bottom');
    let highest = 0;

    newsBlokken.forEach(function(item) {
        console.log(item.getBoundingClientRect().height);
        const itemH = item.getBoundingClientRect().height;
        highest = items > highest ? itemH : highest;
    });
    console.log(highest);
}

问题现象 #

循环中打印item.getBoundingClientRect().height得到三次150，highest值也为150，但实际有一个元素的offsetHeight和clientHeight为195（明显更高），直接打印newsBlokken也能看到该元素高度为195。

问题根源 #

1. 变量名拼写错误 #

代码中判断逻辑使用了未定义的变量items，正确应该是itemH。这个错误会导致判断条件始终不成立（undefined > highest为false），即使itemH是195，highest也不会更新为该值，只会保留之前的最大值。

2. getBoundingClientRect()的特性限制 #

getBoundingClientRect().height返回的是元素在视口中的可见高度，如果元素存在以下情况，会导致获取的高度与实际布局高度不一致：

• 元素被父容器的overflow:hidden截断，仅显示部分内容；
• 元素内的动态内容（如图片、异步加载文本）未完全渲染，此时元素高度还未被撑开；
• 元素处于隐藏状态（如display:none），返回高度为0。

而offsetHeight和clientHeight返回的是元素的实际布局高度（offsetHeight包含content+padding+border，clientHeight包含content+padding），不受视口可见性的影响，更适合用于获取元素的真实高度。

修正方案 #

1. 修复变量名错误 #

将判断条件中的items替换为itemH，确保高度比较逻辑正常运行：

highest = itemH > highest ? itemH : highest;

2. 更换高度获取方式 #

使用offsetHeight或clientHeight替代getBoundingClientRect().height，获取元素真实布局高度：

equalHeight(){
    const newsBlokken = document.querySelectorAll('#news .bottom');
    let highest = 0;

    newsBlokken.forEach(function(item) {
        const itemH = item.offsetHeight; // 按需选择offsetHeight或clientHeight
        console.log(itemH);
        highest = itemH > highest ? itemH : highest;
    });
    console.log(highest);
    // 统一设置所有元素高度
    newsBlokken.forEach(item => {
        item.style.height = `${highest}px`;
    });
}

3. 确保在元素完全渲染后执行代码 #

如果元素内包含图片或异步加载内容，需等待内容加载完成后再计算高度，避免获取到未撑开的初始高度：

// 等待页面所有资源加载完成后执行
window.addEventListener('load', function() {
    equalHeight();
});

// 或者单独监听图片加载
const targetImages = document.querySelectorAll('#news .bottom img');
let loadedImageCount = 0;

targetImages.forEach(img => {
    img.addEventListener('load', checkAllLoaded);
    // 处理已提前加载完成的图片
    if (img.complete) checkAllLoaded();
});

function checkAllLoaded() {
    loadedImageCount++;
    if (loadedImageCount === targetImages.length) {
        equalHeight();
    }
}

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