当处理网页中的元素位置和尺寸时,常常会遇到一些属性和概念,例如 pageX、clientY、screenWidth、offsetLeft 等。这些属性用于描述元素在不同坐标系统中的位置和尺寸,理解它们的区别很重要。在这篇博客中,我们将深入探讨 page、client、screen 和 offset 的含义以及它们之间的区别。
图解:各家族区别
Y方向上同理
page家族:
参照点:网页的左上角
pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加上水平滚动条的距离
pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是clientY加上垂直滚动条的距离
Client家族:
参照点:获取光标相对于浏览器可见窗口左上角位置
clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)
clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离)
Screen家族:
参照点:电脑屏幕左上角
screenX:鼠标点击位置相对于电脑屏幕左上角的水平偏移量
screenY:鼠标点击位置相对于电脑屏幕左上角的垂直偏移量
Scoll家族:
参照点:当前页面相对于网页的左上角位置
scrollX: 被卷去的左侧距离(页面横向滚动,滚动条拉动的距离)
scrollY: 被卷去的上侧距离(页面纵向滚动,滚动条拉动的距离)
PS. scrollX、scrollY:只读不写;
scrollTop、scrollLeft:可读可写
Offset家族:
参照点:光标相对于当前DOM元素左上角位置
offsetX:鼠标点击位置相对于触发事件对象的水平距离
offsetY:鼠标点击位置相对于触发事件对象的垂直距离
总结
名称 | 是否只读 | 包含的内容 | 是否包含border | 是否包含滚动条 | 所属API |
clientHeight/clientWidth | 是 | content/padding | 否 | 否 | Element |
clientTop/clientLeft | 是 | border-width | 是border本身没错了 | 否 | Element |
scrollHeight/scrollWidth | 是 | content/padding/因滚动而未显示的部分 | 否 | 否 | Element |
scrollTop/scrollLeft | 否 | 滚动的内容 | 否 | 否 | Element |
offsetHeight/offsetWidth | 是 | content/padding/border/滚动条 | 是 | 是 | HTMLElement |
offsetTop/offsetLeft | 是 | 子级border外边缘到父级padding外边缘 | 否 | 否 | HTMLElement |