前端常见DOM元素坐标，事件对象中的坐标信息等

前端常见DOM元素坐标，事件对象中的坐标信息等

一、元素坐标和宽高信息

1. window类

2. client类

3. offset类

4. offset类

二、事件对象的坐标位置

一、元素坐标和宽高信息

1. window类

• window.screenTop窗口顶部到屏幕顶部的距离
• window.screenLeft窗口左部到屏幕左部的距离
• window.innerWidth窗口中可视区域的宽度
• window.innerHeight窗口中可视区域的高度
• window.outerWidth浏览器窗口本身的宽度（可视区域+浏览器边框）
• window.outerHeight浏览器窗口本身的高度
  

2. client类

• clientWidth
• clientHeight
  

3. offset类

• offsetWidth 包括border和滚动条的元素宽度
• offsetHeight 包括border和滚动条的元素高度
• offsetLeft 相对上一级最近定位元素的距离上边
• offsetTop 相对上一级最近定位元素的距离左边距离
• left和top相对于上一级距离最近的定位元素
  

4. scroll类

• scrollWidth 滚动元素所有的宽（包括隐藏的内容）
• scrollHeight 滚动元素所有的高度（包括隐藏的内容）
• scrollTop 滚动元素滚动向上出去的高
• scrollLeft 滚动元素滚动向左出去的宽
  

二、事件对象的坐标位置

event.pageX	相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8不支持）
event.pageY	相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8不支持）
event.clientX	相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
event.clientY	相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离
event.screenX	相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离
event.screenY	相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离
event.offsetX	相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离
event.offsetY	相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离