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

1.获取窗口位置及其大小

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

如下图所示：

注意： chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框 FF和IE上下左右有8px的边框宽度

2.获取屏幕的宽高

内容	作用
screen.width	屏幕的宽
screen.height	屏幕的高
screen.availWidth	屏幕可用宽度 减去任务栏
screen.availHeight	屏幕可用高度 减去任务栏

3.元素对象的信息（重点）

下面看一下元素对象中的位置信息。。

内容	作用
clientWidth	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
clientHeight	在页面上返回内容的可视高度（不包括边框，边距或滚动条）
offsetWidth	返回元素的宽度包括边框和填充，但不包括边距
offsetHeight	返回元素的高度包括边框和填充，但不包括边距
offsetLeft	相对于父元素的距离
offsetTop	获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置
scrollWidth	在没有滚动条的情况下，元素内容的总宽度
scrollHeight	在没有滚动条的情况下，元素内容的总高度
scrollTop	被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素滚动的位置
scrollLeft	被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素滚动的位置

下来我们看图解：

1.客户区大小： clientWidth与clientHeight（不包括边框）

2.偏移量：offsetWidth、offsetHeight、offsetLeft、offsetTop

​

3.滚动大小：scrollWidth、scrollHeight、scrollTop、scrollLeft

有些元素（例如元素），即是没有执行任何代码也会自动添加滚动条；但是另外一些元素，则需要通过CSS的overflew属性进行设置才能使用。

scrollWidth、scrollHeight主要用于确定元素内容的实际大小。例如，通常认为元素实在Web浏览器的视口中滚动的元素。因此，带有垂直滚动条的页面总高度就是

document.documentElement.scrollHeight

其次呢，scrollTop与scrollLeft的功能是实时监测被隐藏在内容区域的像素数。通过设置这个属性可以改变元素滚动的位置。

var scrollTop = document.documentElement.scrollWidth || document.body.scrollWidth;
var scrollLeft = document.documentElement.scrollWidth || document.body.scrollWidth;

4.event对象中的坐标信息

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

看图：