scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别

最新推荐文章于 2023-09-01 20:50:14 发布
最新推荐文章于 2023-09-01 20:50:14 发布
阅读量1.5k 收藏
点赞数
文章标签： 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyanyun/article/details/6069539
版权

scrollWidth:获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

liyanyun
关注
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3671
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
pageX,clientX,offsetLeft,scrollLeft的区别
liliy__的博客
04-15 1205
pageX,clientX,offsetLeft,scrollLeft的区别 1、pageX / pageY pageX / pageY的值为鼠标相对于document的距离，即网页左上角的位置 2、clientX / clientY clientX / clientY的值为鼠标相对于浏览器可视区域左上角的距离 3、offsetLeft / offsetTop offsetLeft /...
CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别...
weixin_30455365的博客
05-26 536
转：http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/ 四、元素视图属性 关于元素大小位置等信息的一些属性。有：c...
网页各坐标关于clientX、scrollLeft、offsetLeft、clientLeft等
weixin_30691871的博客
12-01 152
这里如果有框架代码的话，可能会更直接一些，里面有些盒子的值都不知道是哪来的，只选自己看得懂的看吧。以下是对部分值的解释。 1. clientHeight : 都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果...
offsetX和offsetLeft
weixin_52512511的博客
07-17 399
注意：offsetLeft和offsetWidth都是dom元素上的属性，而offsetX是function上event的属性。offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档。（暂时还没学到offsetWidth，以后再补充）
offsetX,offsetLeft,offsetWidth的区别详解
eleanor_wong的博客
05-25 4192
offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发） .big{ width: 200px; height: 200px; border: 1px solid red; position: abso...
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
**scrollHeight** 和 **scrollWidth** 分别用来获取一个元素的滚动高度和滚动宽度。 - **scrollHeight**: 获取的是元素内容的高度加上其内边距（padding）和滚动条（如果有的话）的高度，但不包括边框（border）。...
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
最新发布
m0_56029970的博客
09-01 91
JavaScript尺寸和位置的理解，外加简易滑动条实例
JS获取各种宽度、高度的简单介绍
10-25
scrollLeft和scrollTop属性分别用于设置和获取位于对象左边界和窗口中目前可见内容的最左端之间的距离，以及位于对象最顶端和窗口中可见内容的最顶端之间的距离。在进行滚动操作时，这两个属性非常有用。 ...
由document.body和document.documentElement想到的
09-06
最后，事件对象`event`中的`clientX`和`clientY`表示鼠标相对于文档的坐标，而`offsetX`和`offsetY`则表示相对于触发事件的元素的坐标。 综上所述，理解`document.body`和`document.documentElement`以及它们与`...
浅析offsetLeft,Left,clientLeft之间的区别
09-04
主要是对offsetLeft,Left,clientLeft之间的区别进行了详细的分析介绍，需要的朋友可以过来参考下想，希望对大家有所帮助
jQuery其他(scrollTop/scrollLeft)
m0_67388537的博客
07-08 51
用于获取匹配元素相对滚动条上左位置的偏移。此方法对可见和隐藏元素均有效。这两个属性可以添加在。属性达成的，为此元素需要有定位属性。如果元素没有定位属性，那么此操作会为元素添加。此方法可用于获取或设置元素相对于文档的位置。更改位置是通过调节元素的。方法来快速读取和设置元素的宽度和高度，获取的值是不带单位的。那么，为了保证每个库都能正常使用，需要使用。此处多库共存指的是：jQuery 占用了。方法让 jQuery 释放对。的控制权，让其他库能够使用。符号，达到多库共存的目的。动画中，实现动画效果。
JS中的offsetLeft和clientLeft和scrollLeft的一些区别
小傲哥哥的博客
01-30 2233
假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而...
浅谈offsetleft与left系列的区别
哎
03-14 8585
在复习javascript运动框架的过程中，又遇到了offset属性，之前一直比较模糊的一个知识点，今天各方查阅资料总算有了一个比较清楚地认识，特来道一道其中真谛！ 首先来一段代码测试测试！ 未定义 div{ width:100px; height:100px; border:5px solid red; background-color:gre
screenLeft、screenX、scrollBy()、scrollTo()、scrollX、ScrollY的区别
Sam.LIU的博客
12-07 1396
What the fucking difference between these fucking things... screenLeft和ScreenTop是分别返回相对于屏幕的X和Y坐标， screeX和ScreenY也分别是返回相对于当前屏幕的X和Y坐标，有多块屏幕以主屏幕为准。 scrollX和scrollY分别是文档相对于当前浏览器视口已滚动的距离。 scrollBy()方法滚动...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
semanwmj的专栏
12-15 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文
scrollLeft,scrollWidth等的详细解释
pengshion的专栏
02-04 132
做图片移动的时候这几个东西比较难搞，收藏下，慢慢琢磨去。 [url=http://blog.csdn.net/xuantian868/archive/2008/10/21/3116442.aspx]scrollLeft,scrollWidth,clientWidth,offsetWidth详解大全[/url]...
offsetLeft Left clientX的区别
echo750的博客
01-03 1440
假设obj为某个HTML控件： Obj.offsetTop指obj相对于版面由offsetParent属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft指obj相对于版面或由offsetParent指定的父坐标的计算左侧位置，整型，单位像素。 obj.offsetWidth指控件自身的绝对宽度，不包括因overflow而未显示的部分，也就是实际占据的宽度，整型，单位
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
我是张跑跑
01-07 1万+
1. 总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。 以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。 2. scrollWidth和scrollHeight 2.1 概念 element...
scrollwidth和clientwidth
04-06
scrollwidth和clientwidth都是用来计算HTML DOM元素宽度的属性。其中，scrollwidth表示元素内容的实际宽度，包括溢出部分的宽度，而clientwidth表示元素的可见宽度，不包括滚动条的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值