clientHeight、offsetHeight、innerHeight、ouerHeight 区别

最新推荐文章于 2026-03-27 03:58:34 发布

原创最新推荐文章于 2026-03-27 03:58:34 发布 · 4.8k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文详细解释了clientHeight、offsetHeight、window.innerHeight及window.outerHeight这些属性的区别与联系。阐述了它们在不同场景下的表现，例如当元素具有滚动条或边框时如何变化。

innerHeight 和 outerHeight 是window 对象的只读属性， clientHeight 和 offsetHeight 是DOM 元素属性，接下来看看他们之间的有什么区别。

clientHeight vs offsetHeight

clientHeight 是元素的只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距

offsetHeight 也是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

所以在没有滚动条和边框 border 的时候，他们是想等的

clientHeight = height + padding - 水平滚动条高度（如果存在）
offsetHeight = height + padding + border + 水平滚动条（如果存在）

在这里插入图片描述

window.innerHeight vs window.outerHeight

window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
window.outerHeight: 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

如下图：
在这里插入图片描述
另外，在css 中我们一直使用100vh 去表示浏览器视口的高度，他和js 中的window.innerHeight 是相等的。