js元素距离和鼠标位置整理

距离

• offsetTop / offsetLeft ( 元素与父级 定位元素/table/td/th/body 的距离 )

• clientTop / clientLeft ( 元素边框宽度 )

• scrollTop / scrollLeft ( 元素滚动距离 )

• window.scrollY / window.scrollX ( 文档/页面 滚动距离 )
  window.pageYOffset / window.pageXOffset ( 另一种写法 -跨浏览器兼容- )

• window.screenTop / window.screenLeft ( 浏览器边界到操作系统桌面的距离 )
  window.screenY / window.screenX ( 另一种写法 )

• ---------------- / ---------------

• offsetWidth / offsetHeight ( 元素的布局宽高度 -整数-)

• clientWidth / clientHeight ( 元素的 内部/视口 宽高度 -整数-)

• scrollWidth / scrollHeight ( 元素的内部宽高度 -整数-)

• window.innerWidth / window.innerHeight ( 窗口的内部宽高度 )

• window.outerWidth / window.outerHeight ( 窗口整体宽高度 )

• screen.width / screen.height ( 屏幕宽高度 )

• screen.availwidth / screen.availheight ( 浏览器在屏幕中能占用的最大宽高度 )

• ---------------- / ---------------

• getBoundingClientRect( ) ( 元素的大小及其相对于视口的各种距离的集合)

鼠标位置 图片👇

• clientX / clientY ( 鼠标在客户端区域的坐标 )
• pageX / pageY ( 鼠标在文档区域的坐标 )
• screenX / screenY ( 鼠标在屏幕区域的坐标 )
• movementX / movementY ( 当前事件和上一个mousemove 事件之间的鼠标移动值 )

---

HTMLElement.offsetTop / HTMLElement.offsetLeft