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

1、鼠标事件


pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft_第1张图片
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、网页


pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft_第2张图片
图片.png

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


pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft_第3张图片
图片.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,只读元素。


pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft_第4张图片
图片.png

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


pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft_第5张图片
图片.png

网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft_第6张图片
图片.png

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

3、屏幕

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

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

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

你可能感兴趣的:(pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft)