JavaScript：如何用原生JS获取三个并排div中的最高div高度

嘿，这个需求在做页面布局的时候太常见了，尤其是想让同排模块高度统一的时候。咱们用原生JS就能轻松搞定，我给你一步步讲清楚：

核心思路 #

先拿到所有目标div，然后逐个获取它们的实际高度，最后对比找出最高的那个（还能定位到对应的元素哦）。

具体实现代码 #

// 1. 获取所有带.block-text类的div元素
const blocks = document.querySelectorAll('.block-text');

// 2. 初始化变量，存储最高高度和对应的元素
let maxHeight = 0;
let tallestBlock = null;

// 3. 遍历每个div，对比高度
blocks.forEach(block => {
  // 获取元素的实际高度（包含padding和border，用clientHeight的话是不含border的）
  const currentHeight = block.offsetHeight;
  if (currentHeight > maxHeight) {
    maxHeight = currentHeight;
    tallestBlock = block;
  }
});

// 输出结果看看
console.log(`最高的div高度是：${maxHeight}px`);
console.log('对应的元素是：', tallestBlock);

小细节说明 #

• offsetHeight vs clientHeight：如果你的div有边框，用offsetHeight更准确，它包含元素的内容高度+内边距+边框；如果只需要内容+内边距的高度，就用clientHeight。
• 如果你的div是动态加载的（比如内容是异步渲染的），要确保在DOM完全加载后再执行这段代码，可以把代码放在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', () => {
  // 上面的核心代码放这里
});

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