js中 clientHeight、offsetHeight、scrollHeight的区别

最新推荐文章于 2025-06-16 18:41:56 发布
原创 最新推荐文章于 2025-06-16 18:41:56 发布 · 333 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了DOM元素的clientHeight、offsetHeight和scrollHeight属性，分别代表元素不包含滚动条和边框的高度、包含内边距、边框和滚动条的高度，以及元素内容的总高度，包括不可见部分。理解这些属性对于前端开发中元素尺寸的精确控制至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、clientHeight
元素高度,包含元素的高度+内边距,不包含水平滚动条、边框和外边距
仅仅包含内边距+高度
2、offsetHeight
元素高度 包含元素的垂直内边距和边框、水平滚动条的高度且是一个整数
包含内边距+滚动条+边框

即 clientHeight+滚动条高度+边框 = offsetHeight

3、scrollHeight
元素内容的高度,包括溢出的不可见内容

参考资料：
https://blog.youkuaiyun.com/shibazijiang/article/details/103894498#t2

JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
clientHeight offsetHeight scrollHeight clientWidth详解
07-21
在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前，我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...
js中clientHeight、offsetHeight、scrollHeight、scrollTop详解
PlayYoung的专栏
08-03 1253
clientHeight 大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetH
JavaScript 获取元素的高度
最新发布
BillKu的博客
06-16 1238
javascript复制下载// 返回字符串（如 "50px"）// 转换为数值// 50。
【JavaScript】clientWidth 和 clientHeight 与 offsetWidth 和 offsetHeight 属性详解
lph159的博客
09-11 1851
和是用于获取元素的内部宽度和高度的属性，通常用于测量内容区域的大小。：返回元素的内部宽度，包括内边距（padding），但不包括边框（border）、外边距（margin）和水平滚动条（如果有的话）。返回的值是整数。：与类似，返回元素的内部高度，包含内边距，不包括边框、外边距和水平滚动条。这两个属性常用于获取元素的实际可视区域，尤其是在处理带有内边距的容器时，可以帮助更好地控制内容的显示效果。和是更为完整的宽高属性，包含了元素的边框和滚动条。
js中clientHeight,offsetHeight,scrollHeight的区别
weixin_33885253的博客
05-31 524
2019独角兽企业重金招聘Python工程师标准>>> ...
js中的clientHeight和offsetHeight的区别如
weixin_30455365的博客
04-21 145
如图所示： 转载于:https://www.cnblogs.com/654321cc/p/8902490.html
JavaScript中clientHeight、offsetHeight和scrollHeight的解析
"javascript中entHeight、offsetHeight 和scrollHeight的区别" 在JavaScript中，处理网页元素尺寸时，常常会遇到`clientHeight`、`offsetHeight`和`scrollHeight`这三个属性，它们分别代表了不同的概念，理解和正确...
浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）
热门推荐
骆小胖~
09-13 2万+
  一、宽高     （1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度     （2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度     （3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那
JS中height、clientHeight、scrollHeight、offsetHeight区别
BelleDiao的博客
07-27 2094
我们来实现test中的onclick事件 function justAtest(){ var test=document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById("test3") var test4=document.getElementById("test4...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 4082
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
clientHeight与scrollHeight 区别
notbaldness的博客
02-20 1623
滚动高度，clientHeight与scrollHeight
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义
weixin_43799793的博客
03-11 767
JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop的定义 如图所示： 二、详细介绍这几个概念 接着，我们来逐步了解一下这几个概念。 ①网页可见区域高：document.body.clientHeight； ②网页正文全文高：document.body.scrollHeight； ③网页可见区域高（包括边线的高）：document.body.offsetHeight； ④网页被卷去的高：document.body.scrollTop；
JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
weixin_30768175的博客
10-24 150
　　JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能，其中使用最多的场景是加载更多，当鼠标滚动至页面下方时，自动加载下一页的内容。另一个常用的场景是当用户滚动至页面某一地方时，页面会给出提示或是将某些重要信息或按钮显示出来。实现这些效果的关键是要区分clientHeight、scrollHeight、offsetHeight等属性的区别。刚好最近项目中有用到过这些概念，今天就抽空整...
js中clientHeight,clientWidth,clientLeft,clientTop的使用【学习笔记】
m0_56132701的博客
01-06 855
element.clientLeft属性等于元素节点左边框的宽度，element.clientTop属性等于网页元素顶部边框的宽度，单位为像素。这两个属性都包括滚动条的宽度，但是不包括margin和padding值，不过几乎不会出现左侧和顶部滚动条的情况。element.clientHeight属性返回元素节点可见部分的高度，element.clientWidth属性返回元素节点可见部分的宽度。这两个属性包含元素的padding值，但是不包含元素的margin值、边框以及滚动条。
scrollHeight和scrollHeight以及clientHeight的区别与定义
weixin_42060658的博客
10-27 866
js获取clientHeight与scrollTop
weixin_34110749的博客
10-31 116
http://www.360doc.com/content/07/0129/11/12406_348561.shtml 转载于:https://www.cnblogs.com/blosaa/archive/2011/10/31/2230421.html
Javascript clientHeight/offsetHeight/scrollHeigt 比较
08-15 626
今天仔细研究了一下offsetHeight/scrollHeight/clientHeight 的区别，总结如下： 了解这些属性区别之前请先设想一个带有scrollbar的div，width:100px, height:100px, overflow:auto
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值