为了账号安全,请及时绑定邮箱和手机立即绑定

pageX、clientX、screenX、

标签:
Html/CSS

原文标题:

pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft

1、鼠标事件


webp

pageX、clientX、screenX


clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于浏览器内容窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
(跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动,也就是说,他计算left或top时直接忽略了滚动条的高和宽,它的参考点是浏览器可见区域的左上角,而不是页面本身的body左上角原点,计算数值和滚动条是否滚动没有关系,只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离,忽略了滚动条的存在)

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

pageX:参照点是页面本身左上角的原点.已经把滚动条滚过的高或宽计算在内.

所以基本可以得出结论:
pageX > clientX, pageY > clientY
pageX = clientX + ScrollLeft(滚动条滚过的水平距离)
pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

2、网页


webp

图片.png


网页可见区域宽: document.body.clientWidth;
clientLeft: 获取对象的border宽度
clientTop:获取对象的border高度
网页可见区域高: document.body.clientHeight;
包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。


webp

图片.png


网页可见区域高: document.body.offsetHeight  (包括边线的宽);
网页可见区域宽: document.body.offsetWidth   (包括边线的宽);

包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。


webp

图片.png


网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight


webp

图片.png


网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft

webp

图片.png


网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;{screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标}
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

3、屏幕

屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;

获取用户电脑屏幕的高度,是不关浏览器或者顶部工具栏跟底部工具栏的高度的
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

电脑屏幕减掉顶部工具栏跟底部工具栏的高度



作者:Left左
链接:https://www.jianshu.com/p/615b87cdbf7d


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消