在 JavaScript 中获取 div 元素的高度

在浏览器 JavaScript 中获取 <div> 元素的高度时，先选中该元素，再根据需要读取对应的测量值：要测量内部区域，使用 clientHeight；要测量包含边框的盒子，使用 offsetHeight；要测量包含溢出内容的完整高度，使用 scrollHeight；要测量渲染后的矩形，则读取 getBoundingClientRect().height。这些属性测量的是元素的不同部分，因此结果可能不同。

下面的可运行示例模拟一个内容高度为 50px、内边距为 4px、边框为 1px 的盒子。示例在没有浏览器 DOM 的 Node 中运行，并打印对应的测量值；代码和输出块保持原样，其中的英文标签也保留英文。在浏览器中，可以从选中的 DOM 元素读取这些属性。

const element = {
  contentHeight: 50,
  padding: 4,
  border: 1,
  get clientHeight() {
    return this.contentHeight + 2 * this.padding;
  },
  get offsetHeight() {
    return this.clientHeight + 2 * this.border;
  },
  get scrollHeight() {
    return this.clientHeight;
  },
  getBoundingClientRect() {
    return { height: this.offsetHeight };
  }
};

console.log('clientHeight:', element.clientHeight);
console.log('offsetHeight:', element.offsetHeight);
console.log('scrollHeight:', element.scrollHeight);
console.log('bounding height:', element.getBoundingClientRect().height);

clientHeight: 58
offsetHeight: 60
scrollHeight: 58
bounding height: 60

在 JavaScript 中测量 div 的高度

使用 DOM 按 ID 选中现有元素，然后从下列测量方式中选择一种。上面的 Node 示例模拟了这个盒子的测量结果；测量页面中的元素时，将 element 替换为 document.getElementById('container') 或其他选择器的返回值。等元素已加入文档且布局可用后，再读取尺寸。

根据需要测量的盒子选择属性：测量内部区域时使用 clientHeight；结果需要包含边框时使用 offsetHeight；需要获取用于滚动的完整内容高度时使用 scrollHeight；需要测量渲染后的矩形时使用 getBoundingClientRect().height。这些值都不包含外边距；如果计算中需要考虑间距，请单独测量相应的布局间隔。它们的单位是 CSS 像素，而非屏幕物理像素。

clientHeight

clientHeight 表示内部高度，单位为 CSS 像素：它包含顶部和底部内边距，但不包含边框和外边距。示例中的内容高度为 50px，每侧内边距为 4px，因此结果为 58。此属性返回整数。

offsetHeight

offsetHeight 包含元素的内容、内边距、边框以及任何水平滚动条，但不包含外边距。示例中的计算结果为 50 + 8 + 2 = 60px。此属性也返回整数。

scrollHeight

scrollHeight 测量内容的完整高度；发生溢出时，也包含超出可见区域的部分。它包含内边距，但不包含边框和外边距。示例中的内容没有溢出，因此结果为 58；如果页面内容发生溢出，它可能大于 clientHeight。这是一个整数测量值，但不能假设它在所有布局中都等于 clientHeight。

getBoundingClientRect()

getBoundingClientRect() 返回一个矩形，描述元素相对于视口的渲染尺寸和位置。读取其 height 属性即可得到渲染后的高度。该高度包含内边距和边框，因此示例测得 60px。与上述返回整数的尺寸属性不同，这个高度可能是小数，例如布局或变换产生了亚像素尺寸时。需要测量渲染后的矩形，而非内容的可滚动高度时，请使用此方法。