如何获取多个class为content的div容器的高度？

问题根源 #

1. document.querySelectorAll(".content")返回的是NodeList元素集合，不是单个DOM元素，直接调用offsetHeight会返回undefined——因为集合本身没有这个属性。
2. document.querySelector(".content")仅能获取第一个匹配的元素，无法覆盖所有.content容器。
3. 代码中的中文引号（如”item”）会导致选择器失效，必须使用英文引号（"item"或'item'）。

可行解决方案 #

方案1：遍历NodeList获取每个元素高度

使用forEach遍历所有.content元素，逐个获取高度并输出：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const allContents = document.querySelectorAll(".content");
  
  allContents.forEach((content, index) => {
    // 方式1：offsetHeight（元素布局高度，包含padding、边框、滚动条，不含margin）
    const layoutHeight = content.offsetHeight;
    // 方式2：getBoundingClientRect().height（元素在视口中的实际高度，可能受transform等样式影响）
    const viewportHeight = content.getBoundingClientRect().height;
    
    console.log(`第${index+1}个.content布局高度：`, layoutHeight);
    console.log(`第${index+1}个.content视口高度：`, viewportHeight);
  });
});

方案2：转为数组遍历（兼容旧浏览器）

如果需要兼容不支持NodeList.forEach的旧浏览器，可先将集合转为数组：

document.addEventListener('DOMContentLoaded', () => {
  const allContents = Array.from(document.querySelectorAll(".content"));
  
  allContents.forEach((content, index) => {
    console.log(`第${index+1}个.content高度：`, content.offsetHeight);
  });
});

关键注意事项 #

• 必须确保脚本在DOM渲染完成后执行：要么把脚本放在</body>标签前，要么用DOMContentLoaded事件包裹代码，否则会因元素未加载导致获取失败。
• 如果.content是动态生成的（比如通过AJAX加载），需要在元素生成完成后再执行高度获取代码。

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