Js中 关于top、clientTop、scrollTop、offsetTop

最新推荐文章于 2023-09-07 13:58:58 发布
最新推荐文章于 2023-09-07 13:58:58 发布
阅读量364 收藏 1
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shikun520/article/details/84689300
版权

obj.clientWidth   //获取元素的宽度

obj.clientHeight  //元素的高度

obj.offsetLeft   //元素相对于父元素的left

obj.offsetTop  //元素相对于父元素的top

obj.offsetWidth  //元素的宽度

obj.offsetHeight //元素的高度

区别：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = width + padding + border
offset比client多了border的宽度

 

offsetTop：合并后的高度 
scrollTop：已滚动过去的高度 
scrollHeight：滚动显示区的高度 

详情如下图：

 

shikun520
关注
专栏目录
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
顺其自然~专栏
03-23 548
这里是javascript中制作滚动代码的常用属性 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽);（offset：偏移） 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： documen..
js clientTop
杨传龙的专栏
03-17 859
今天要做页面中元素的滚动，发现一个知识点，clientTop就是设置元素的border-top的值。类型number,(int)
js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
最新发布
前端小99的博客
09-07 329
scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。5、srcollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标（css定位的元素或body元素）距离顶端的高度。
对Javascript中client系列（clientTop、clientLeft、clientWidth和clientHeight）属性的相关解释
weixin_43312083的博客
04-14 1232
clientTop:clientTop可以返回div的上边框的大小,其值为一个整数，没有单位。但是和borderTopWidth存在一定的区别。 在这里插入代码片<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>与client有关<...
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
12-02
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body....网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft
Js中关于top、clientTop、scrollTop、offsetTop.pdf
09-27
Js 中关于 top、clientTop、scrollTop、offsetTop 的详细知识点 在 JavaScript 中，理解 top、clientTop、scrollTop、offsetTop 等属性是非常重要的，这些属性都是用于获取或设置 HTML 元素的位置和尺寸的。下面...
详解JavaScript中top、clientTop、scrollTop、offsetTop的差异与应用
在JavaScript编程中，理解`top`、`clientTop`、`scrollTop`和`offsetTop`这四个属性的区别至关重要，特别是在处理网页布局和滚动相关的交互时。这些属性主要用于定位元素在浏览器视窗中的位置，以及与文档流、可视...
scrollTop、offsetTop、clientTop
weixin_30840253的博客
09-17 151
1.offsetTop： obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置。 2.clientTop: 这个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0。 3.scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (即网页被卷去的高) 如果元素是可以滚动的,可以通...
clientTop、scrollTop、offsetTop、scrollHeight、clientHeight、offsetParent。。。
晴天Smile
11-13 331
也就是元素的可视宽度，这个宽度包括元素的边框(border)，水平padding，垂直滚动条宽度，元素本身宽度等。 offsetHeight跟offsetWidth 　　offsetHeight跟offsetWidth类似，只是方向改为垂直方向上的。 　　只是我们的示例中没有水平和垂直滚动条。另外经过测试可以发现，即使元素加上水平或垂直滚动条，offsetWidt
clientTop、clientLeft、clientWidth、clientHeight
温大侠的博客
07-27 1591
1.clientTop、clientLeft获取的是上边框、左边框的宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <
offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】
hannah2233的博客
12-24 7262
1、 offsetTop、offsetLeft2、 offsetWidth、offsetHeight3、 offsetX、offsetY1、 clientWidth、clientHeight2、 clientTop、clientLeft3、 clientX、clientY1、 scrollWidth、scrollHeight2、 scrollTop、scrollLeft
Js中 关于top、clientTop、scrollTop、offsetTop等
crazy_fire
07-06 1307
http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html 一个重要的实例，选摘处忘记了 picture auto scroll <!-- body { text-align: center; margin: 0 auto; } TD { FONT-SIZE: 12px;
Element属性：获取元素各边框宽度，clientTop,clientLeft
m0_37158404的博客
05-25 795
clientTop： 元素上边框的宽度，即border-top-width，只读属性，number类型 clientLeft：元素左边框的宽度，即border-left-width，只读属性，number类型 不存在clientBottom和clientRight属性，可通过如下方式获取
js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”，你知道多少...
weixin_30256901的博客
09-15 629
当要做一些与位置相关的插件或效果的时候，像top、clientTop、scrollTop、offsetTop、scrollHeight、clientHeight、offsetParent。。。看到这么多单词，而且长得那么像，是不是懵X了！ 第一次看到这图，说实话有点被吓到。。。 ============================分割线=========================...
关于top、clientTop、scrollTop等
weixin_30352191的博客
07-18 339
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值