Element clientHeight属性

介绍

只读属性 Element.clientHeight 就是一个专门用来“量内部可使用空间”的尺子。

如果你把 HTML 元素想象成一个 “带泡沫内衬的快递箱”：

• 外箱壁：border（边框）。
• 泡沫内衬：padding（内边距）。
• 箱子里面实际的空腔：内容区域。

clientHeight 量的就是：从箱子里面“顶部的泡沫表面”到“底部的泡沫表面”的距离。

它的精确公式是：内容高度 + 顶部内边距 + 底部内边距。

它不包含上下边框（border）、外边距（margin）。而且，如果这个元素有水平滚动条，滚动条会占用箱子内部的空间，所以 clientHeight 会把滚动条的高度扣除掉！

注意事项

元素陷阱

两种情况会让 clientHeight 为 0。

行内元素

元素是 display: inline（行内元素，如 <span>），即使你在 CSS 里给 <span> 写了 height: 200px;，浏览器也会直接无视。

因为行内元素没有“块级盒子”的概念，它们像文字一样流式排布，浏览器不把它们当成独立的“矩形区域”来测量。

网页上看起来有内容的 <span>，你用代码去读它的 clientHeight，永远是 0。

不显示元素

在 CSS 渲染引擎里，display: none 代表这个元素完全从文档流中删除了，没有生成任何“布局盒子”在内存里，自然无法测量高度。

注意区分visibility: hidden; 和 opacity: 0; 是会正常返回高度的，因为它们在内存里依然占位，只是肉眼看不见而已。

如果你遇到 clientHeight 是 0，请先去开发者工具（F12）里看这个元素的Computed 样式，检查它的 display 属性是不是 inline 或者 none。

时间陷阱

刚修改 style 立马去读是错的！

box.style.height = '200px';
console.log(box.clientHeight); // 你可能会得到 0 或者旧的高度！

修改 CSS 后，浏览器需要重新回流（Reflow）和重绘，这需要几毫秒的时间。如果你在同一个同步代码块里立刻读取，浏览器还没算完。

解决办法是用 setTimeout 或者 requestAnimationFrame 延迟读取：

box.style.height = '200px';
requestAnimationFrame(() => {
    console.log(box.clientHeight); // 现在拿到的才是计算后的真实高度！
});

精度陷阱

clientHeight规范规定它必须返回整数（integer）（单位像素，四舍五入）。如果你在移动端或屏幕缩放比例下，它可能会丢失精度。

如果你在做动画或精准拖拽，且需要极度精确的浮点数（带小数点的），请使用 element.getBoundingClientRect().height（这个方法包含边框，并且返回精确的小数）。