彻底搞懂offsetHeight，clientHeight，scrollHeight，scrollTop，offsetTop

最新推荐文章于 2022-11-10 16:04:27 发布
最新推荐文章于 2022-11-10 16:04:27 发布
阅读量594 收藏 3
点赞数
文章标签： 前端 javascript 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50441807/article/details/125830665
版权

offsetHeight和clientHeight都是获取dom元素自身的高度的，它们之间的区别在于：
offsetHeight：获取的高度除了自身高度外，还包含了padding和border
clientHeight：获取的高度除了自身高度外，还包含了padding

scrollHeight：获取的是有滚动条盒子里面滚动内容的高度，如下图：
在这里插入图片描述
注：红色盒子的scollHeight就是绿色盒子的高度

scrollTop：滚动条滚动的距离，也就是滚动的内容被卷入的高度，一般用于设置滚动条的位置；
在这里插入图片描述

offsetTop：与父级盒子顶部的距离；
在这里插入图片描述

小智玩前端
关注
区分clientHeight、scrollHeight、offsetHeight
xm2by的博客
08-21 1443
区分clientHeight、scrollHeight、offsetHeight clientHeight： 元素的可见高度 scrollHeight： 元素的整体高度 offsetHeight： 元素的高度 参考文献： [1] 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop [2] js中offsetHe...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
weixin_29084231的博客
06-24 614
全文参考：https://github.com/iuap-design/blog/issues/38 、MDNclientHeight，只读clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(pad...
clientHeight和offsetHeight
树上骑个猴的博客
12-22 7042
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、
scrollHeight,offsetHeight,clientHeight的本质区别
WEBCODE
07-16 154
scrollHeight,offsetHeight,clientHeight的本质区别 1).element.scrollHeight (只读) 总结 scrollHeight是指元素的滚动视图的高度(Height of the scroll view of an element，即有滚动条时从头部滚动到尾部的高度),它包括元素的内边距,但不包括外边距. Height of the scr...
offsetTop,offsetHeight,clientHeight图解
weixin_42776027的博客
03-15 3347
动态的计算弹框距离外部元素的位置，即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果弹框的宽度（offsetWidth）+距离左边的距离（offsetLeft）大于父元素的宽度，则判断为超出外部元素范围，需要动态改变弹框距离边框的位置 下面是对offsetTop,offsetHeight,clientHeight,scrollHeight...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
看陌生的风景的博客
02-22 147
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight(与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度) 网页可见区域高：document.body.offsetHeight(自身的高度,如果有设置boder的话还应该加上boder的值) 网页被卷去的高：document.bod...
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
12-11
例如，通过`scrollTop`和`scrollHeight`可以判断元素是否已滚动到底部，从而触发加载更多内容的事件。而`offsetTop`和`offsetHeight`则可用于计算元素在屏幕中的位置，实现如悬浮按钮等效果。理解并熟练运用这些属性...
offsetHeight和clientHeight的区别
teresa502的专栏
08-24 1005
clientHeight大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解（转）
二熊不是熊二的博客
11-04 369
el.offsetHeight = height + padding + border（表示可视区域的高度，包含了border和滚动条） el.clientHeight = 表示的是可视区域的高度，不包含border和滚动条 el.scrollHeight = 整个元素的高度 （ 包括了clientHeight看不到的那部分，一般就是你css设置的元素高度） el.offsetTop = 子元素的...
彻底搞懂clientHeight、offsetHeight、scrollHeight的区别
最新发布
cocplay的博客
11-10 241
我们开发web代码的时候,经常回遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别.
height、offsetheight、clientheight、scrollheight区别简单理解
kouryoushine的博客
08-11 450
参考 https://www.cnblogs.com/layaling/p/6223372.html https://www.cnblogs.com/wenruo/p/9754576.html 正文 以一个div盒子模型为例。 height 内容的高度，不包含padding,margin，border等仅仅表示内容显示的高度 offsetheight offsetheight = 内容高+padd...
DOM元素的各种尺寸offsetHeight/Width,clientHeight/clientWidth,offsetLeft/Top,
Walter的博客
08-19 480
1、#box{height: 300px;width: 300px;background:red;margin: 100px 200px;border: 100px solid #000;padding: 100px;/margin: 0;/position: absolute;} 2、offsetHeight/Width:是指元素的实际宽高，即content的宽高 + padding值 + bo
搞懂clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop...这些高度
JunVei的博客
08-10 299
搞懂clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop...这些高度
clientHeight,offsetHeight和scrollHeight区别
xuyq2002的专栏
08-25 1990
对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。      
js offsetHeight offsetWidth 解说
weixin_30457065的博客
07-04 128
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获...
Js之offset属性与style属性的区别
qq_34082921的博客
10-31 711
offsetWidth和.offsetHeight 返回的宽和高是包括padding 内容区 border的，但是不包括margin。所以获取的是元素的实际宽高 = width + border + padding.如果元素没有父级元素或者父级元素没有定位(祖先元素也可以)，则以body为父级。
JavaScript滚动属性详解：scrollTop、scrollHeight、offsetTop与offsetHeight
"这篇学习笔记主要探讨了JavaScript中与页面滚动相关的几个重要属性：scrollTop、scrollHeight、offsetTop和offsetHeight。这些属性在处理页面布局和动态效果时扮演着重要角色，尤其对于开发者来说，理解它们的工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值