pageX,clientX,offsetLeft,scrollLeft的区别

最新推荐文章于 2022-01-08 00:28:36 发布
最新推荐文章于 2022-01-08 00:28:36 发布
阅读量1.1k 收藏 9
点赞数 1
分类专栏： js基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liliy__/article/details/105532841
版权

pageX,clientX,offsetLeft,scrollLeft的区别

在这里插入图片描述

1、pageX / pageY

  • pageX / pageY的值为鼠标相对于document的距离，即网页左上角的位置

2、clientX / clientY

  • clientX / clientY的值为鼠标相对于浏览器可视区域左上角的距离

3、offsetLeft / offsetTop

  • offsetLeft / offsetTop的值元素距离offsetParent左上角的水平/垂直距离
  • offsetParent 距离元素最近的前代定位元素，如果前代元素没有定位，则得到body或者html元素

4、scrollLeft / scrollTop

  • scrollLeft / scrollTop的值为元素滚动出该元素可视范围的水平距离 / 垂直距离，通常配合overflow:hidden 使用
liliy__
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
13-pageX的兼容性处理.html
02-15
13-pageX的兼容性处理.html
scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
weixin_33895695的博客
03-15 545
scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或...
pageX,clientX,offsetX,screenX,style.left,offsetLeft,scrollLeft,clientLeft的区别以及使用详解
qq_35859392的博客
01-25 1048
1.clientX，pageX，offsetX与screenX 先统一了解下这四个概念，理解不透没关系，这些属性都是用于鼠标的。 clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。 pageX：在水平方向上，鼠标指针距离网页文档X轴左侧边缘的距离。 offsetX：在水平方向上，鼠标指针距离鼠标所在元素左侧边缘的距离。 screenX：在水平方向上，鼠标指针距离电脑屏幕...
使用scrollX, pageXOffset, scrollLeft获取滚动条到窗口做边界的距离，及其各自的特点...
weixin_30627341的博客
02-25 142
在开发页面的时候，我们常常会用到一个值，就是滚动条到窗口左边界的距离，通常可以使用的属性有三个，分别是： 1.window.scrollX; 2. window.pageXOffset; 3. document.documenetElement.scrollLeft 每个方法都有自己的一些特点和需要注意的地方。 先通过一篇文章来了解下，，地址：http://help.dottoro...
clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别
weixin_30530939的博客
01-03 186
一.定义和用法 1.event.clientX：事件对象的水平偏移量； event.clientY：事件对象的垂直偏移量； 2.event.pageX：事件对象加上滚动距离后的水平偏移量； event.pageY：事件对象加上滚动距离后的垂直偏移量； 3.$(selector).scrollLeft(offset):获得或设置对象的滚动水平位置； $(selector...
网页各坐标关于clientX、scrollLeft、offsetLeft、clientLeft等
weixin_30691871的博客
12-01 144
这里如果有框架代码的话，可能会更直接一些，里面有些盒子的值都不知道是哪来的，只选自己看得懂的看吧。以下是对部分值的解释。 1. clientHeight : 都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
12-pageX的兼容性处理.html
02-15
12-pageX的兼容性处理.html
scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别
liyanyun的专栏
12-11 1488
<br />scrollWidth:获取对象的滚动宽度 <br />scrollHeight: 获取对象的滚动高度。 <br />scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 <br />scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离<br />offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 <br />offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐
clientX,screenX,offsetX,pageX,offsetLeft,...
u013362969的博客
12-27 848
1.pageX，clientX，screenX与offsetX 先统一了解下这四个概念，理解不透没关系，咱们把概念相近的对比着一一细说。 pageX：鼠标指针距离文档X轴左侧边缘的距离，不随滚动条变化而变化 clientX：鼠标指针距离可视窗口左侧边缘的距离，随着滚动条变化而变化 screenY：鼠标指针距离屏幕的距离(包括浏览器工具栏之类)，不随滚动条变化而变化 offsetX：鼠标指...
获取滚动条坐标位置window.pageXOffset/document.body.scollLeft
koukou0419的博客
06-02 510
<!-- //window.pageXOffset//滚动条的滚动距离 IE9以下不兼容 //document.body.scollLeft/scollTop //IE8/5/4 //document.documentElement.scollLeft/scollTop //IE7/6 //document.body.scollLeft+document.documentEleme...
JS: offsetLeft/Top、offsetParent、scrollLeft/Top、clientLeft/Top、scrollX、scrollY、pageXOffset、pageYOffse
devJan的博客
04-25 666
定位的父级元素 offsetParent:离当前元素最近的非position:static的元素
offsetLeft理解以及MouseEvent接口中的screenX,clientX,pageX,offsetX区别.
qq_15686015的博客
01-08 1196
背景 最近在做一款基于canvas的画板插件，开发过程中的画笔功能就会使用很多关于鼠标位置的属性：screenX/Y，clientX/Y，pageX/Y，offsetX/Y。 之前在做到过类似的工具(很简单)，但都是看了下鼠标位置信息的api看到那个用那个没有去深思它们之间的区别，这次在遇见坑花了点时间整理强化下自己的记忆。 要理解它们之间的差异需要正确的认识参照物。 screenX/Y 正如名字一样它的参照物是电脑的屏幕。如图所示 ...
记录一下pageX，offsetX，clientX，offsetLeft，offsetWidth，pageYoffset，scrollTop,scrollY，等。原文摘自MDN文档库。保证正确。
qq_42780323的博客
11-04 1267
这几个属性其实都好理解，但是太多了很容易忘记又记混了。所以从MDN里面摘抄一下。保证记住。 目录 1.MouseEvent.pageX 2.MouseEvent.offsetX 3.MouseEvent.clientX 4.HTMLElement.offsetLeft 5.Element.getBoundingClientRect() 6.Element.clientWidth 7.Element.scrollTop 8.Window.scrollY 9.Window.pageYOffs
【兼容封装】对pageX/pageY || scrollLeft/scrollTop兼容处理
Umbrella_Um的博客
07-25 319
对pageX/pageY || scrollLeft/scrollTop兼容处理 e.clientX/e.clientY 鼠标在可视区域中的位置 e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持 scrollLeft/scrollTop中存在两种情况 document.body.scrollTop//360 谷歌等标准模式 || document.docume...
元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY
盏茶作酒的博客
09-23 1085
元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY event.pageX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域包括窗口自身的控件和滚动条。 event.pageY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域包括窗口自身的控件和滚动条。 d...
innerHeight与clientHeight、innerWidth与clientWidth
weixin_30887919的博客
12-13 868
window对象： （1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。 IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。 （2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。 IE不支持该属性，IE中body元素的clientWidth属性与...
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7683
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
offsetX,clientX,pageX,offsetLeft
最新发布
05-13
假设有一个 div 元素，它的 offsetLeft 为 100px，当鼠标在它内部发生了 click 事件时，offsetX 就表示鼠标相对于这个 div 左侧边框的像素距离，clientX 则表示鼠标相对于浏览器窗口左侧的像素距离，pageX 则表示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值