元素宽高及偏移情况汇总-JavaScript

位置属性

window.addEventListener('mouseout', (e) => {
      // e 为鼠标事件
      console.log(e);
})

属性	含义
clientX、clientY	鼠标位置距离当前body可视区域的x，y坐标
pageX、pageY	鼠标位置距离当前整个body的x，y坐标，包括卷去的
screenX、screenY	鼠标位置距离当前电脑屏幕的x，y坐标
x、y	同screenX、screenY
offsetX、offsetY	鼠标位置距离当前绑定元素的x，y坐标
offsetLeft,offsetTop	鼠标位置相对于带有定位的父盒子的x，y坐标

宽高属性

属性	含义	滚轴包含情况
window.innerWidth、window.innerHeight	窗口的文档显示区的宽高	不包含
window.outerWidth、window.outerHeight	窗口的文档显示区的宽高	包含
document.documentElement.clientWidth(clientHeight)	窗口文档显示区的宽高	不包含

更新中...如有错误，还请在评论区指正