offsetTop,offsetHeight,clientHeight图解

最新推荐文章于 2025-05-29 15:40:25 发布
最新推荐文章于 2025-05-29 15:40:25 发布
阅读量3.4k 收藏 6
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42776027/article/details/88568306
本文探讨了如何动态计算弹框相对于外部元素的位置，包括offsetLeft、offsetTop等属性的使用，以及在元素布局受限情况下，如何避免使用display:none隐藏元素，而采用opacity:0或visibility:hidden的方法。

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

动态的计算弹框距离外部元素的位置，即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果弹框的宽度（offsetWidth）+距离左边的距离（offsetLeft）大于父元素的宽度，则判断为超出外部元素范围，需要动态改变弹框距离边框的位置

下面是对offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop图解

 

对元素的布局有限制，不能使用display:none的方式隐藏，可以使用opacity:0或者visibility: hidden隐藏元素，因为display:none方式不能获取到元素的高度，宽度等

Hzsilvana
关注
DOM元素尺寸和位置相关的属性(clientWidth、offsetWidth、scrollWidth...)总结
小赛赛爱吃肉
01-09 1058
由于DOM元素位置和大小的属性这块和鼠标事件的知识点容易混淆，所以需要单独总结一下，又不想把截图存到本地，所以就有了这篇文章。如果有什么地方写的不对，还请私信或留言给我扶正! 谢谢。
Offset,Scroll和Client三大系列总结
Calla_Lj的博客
05-16 1110
Offset,Scroll和Client三大系列总结 offset系列 scroll系列 client系列 offsetWidth scrollWidth clientWidth offsetHeight scrollHeight clientHeight offsetLeft scrollLeft clientLeft offsetTop scrollTop clie...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 17万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
【基础】offsetHeight、clientHeight和scrollHeight的区别
最新发布
AM1n98的博客
05-29 427
offsetHeight = 内容高度 + padding + borderclientheight = 内容高度 + paddingscrollHeight = 内容实际尺寸 + padding。
height、clientHeight、scrollHeight、offsetHeight区别
weixin_30587927的博客
12-02 159
我们来实现test中的onclick事件 function justAtest(){ var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementById...
clientHeight和offsetHeight
树上骑个猴的博客
12-22 7384
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、
彻底搞懂clientHeight、offsetHeight、scrollHeight的区别
十八酱君
01-08 2万+
日常开发web代码得时候,总是遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别. 1.定义说明 条目 含义 图示 clientHeight 元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距 offsetHeight 元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数 ...
JavaScript中的一些定位属性[图解]
10-29
我们将以div元素为例，探讨clientHeight、clientWidth、offsetHeight、offsetWidth、clientTop、clientLeft、offsetTop、offsetLeft、scrollTop、scrollLeft和offsetParent这些属性。 clientHeight和clientWidth ...
javaScript座标获取
05-09
3. `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`：这些属性提供了元素相对于其最近的定位祖先元素的位置和尺寸，如果祖先没有定位，则相对于文档 body。例如： ```javascript var element = ...
scrollTop、offsetHeight、offsetTop、 clientHeight等属性用法详解
LRQQHM的博客
09-22 4934
下面有每个属性详细的解释 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.b
clientHeight(width)(top)、scrollHeight(width)(top)、offsetHeight(width)(top)的详细区别
qq_44606064的博客
05-23 680
clientHeight(width)(top)、scrollHeight(width)(top)、offsetHeight(width)(top)
clientHeight，offsetHeight，scrollHeight，offsetTop，scrollTop之间的区别
qq_30758077的博客
08-20 404
clientHeight，offsetHeight，scrollHeight，offsetTop，scrollTop之间的区别 clientHeight和offsetHeight属性和元素的滚动、位置没有关系 clientHeight：包含元素的width + padding，不包含border，不包含横向的滚动条，对于行内元素，clientHeight的数值为0. offsetHeight...
css clientheight、offsetheight、scrollheight详解
wangjun5159的专栏
02-07 1万+
介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。 clientheightclientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
clientWidth与clientHeight，offsetWidth与offsetHeight
Always-Learning
11-28 475
clientWidth与clientHeight 返回值 返回的是元素的content + padding的部分 这两个属性都是只读的，不能进行修改，假如你给clientWidth进行赋值，是不起作用的。 offsetWidth与offsetHeight 返回值 包括content + padding + border ...
关于offsetTop与offsetHeight的区别以及使用方法
soos的博客
07-10 6597
offsetTop和offsetHeight是设置一个元素的位置和获取圆度大小经常会使用的参数，下面具体讲一下他们的区别于联系： 例如obj为html的一个元素对象， obj.offsetTop指的是obj距离上方或者父级元素（position非static）的位置，整型，单位像素。 obj.offsetHeight指obj自身的高度，整型，单位像素。 另外，还有scrollHeight与
scrollHeight,offsetHeight,clientHeight的本质区别
WEBCODE
07-16 196
scrollHeight,offsetHeight,clientHeight的本质区别 1).element.scrollHeight (只读) 总结 scrollHeight是指元素的滚动视图的高度(Height of the scroll view of an element，即有滚动条时从头部滚动到尾部的高度),它包括元素的内边距,但不包括外边距. Height of the scr...
offsetTop、clientHeight、scrollTop等属性的含义
qq_53895518的博客
05-20 634
包含元素的引用保存在offsetParent属性中，不一定是parentNode，比如的offsetParent是，因为它是DOM层次中距最近的一个具有大小的元素。所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问。四、innterHeight和outerHeight。这两个属性也是只读和需要重新计算的。二、客户区大小-以client开头的。一、偏移量-以offset开头的。三、滚动大小-scroll开头的。
【JavaScript】clientWidth 和 clientHeight 与 offsetWidth 和 offsetHeight 属性详解
lph159的博客
09-11 1860
和是用于获取元素的内部宽度和高度的属性，通常用于测量内容区域的大小。：返回元素的内部宽度，包括内边距（padding），但不包括边框（border）、外边距（margin）和水平滚动条（如果有的话）。返回的值是整数。：与类似，返回元素的内部高度，包含内边距，不包括边框、外边距和水平滚动条。这两个属性常用于获取元素的实际可视区域，尤其是在处理带有内边距的容器时，可以帮助更好地控制内容的显示效果。和是更为完整的宽高属性，包含了元素的边框和滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值