js的各种距离计算（较全）

1、关于window

• window.screen.width、window.screen.height 返回屏幕的宽度、高度
• window.screen.availWidth、window.screen.availHeight 返回屏幕的宽度和高度 （不包含任务栏）
• window.screen.pixelDepth 返回屏幕的颜色分辨率（每象素的位数）
• window.outerHeight、window.outerWidth 窗口的外部宽度（高度），包括所有界面元素（如工具栏/滚动条）
• window.innerWidth、window.innerHeight 窗口的内部宽度与高度(不包含工具条与滚动条):
• window.pageXOffset、window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素
• window.scrollX、window.scrollY 获取文档水平滚和垂直滚动的的像素数。 ie不支持
• window.screenX、window.screenY 窗口相对于屏幕的X和Y坐标。ie中window.screenLeft 和 window.screenTop获得相同的值 但是浏览器计算方式不同，不使用

2、关于事件对象

• event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。
• event.pageX、event.pageY 鼠标相对于文档的坐标。
• event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，最早只有IE有，现在都支持。
• event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

3、关于element

• element.offsetHeight、element.offsetWidth 元素的可视宽高距离。
• element.offsetLeft、element.offsetTop 返回当前元素左上角相对于 element.offsetParent 节点的左边界偏移的像素值(包含margin)。
• element.clientTop、element.clientLeft 内容区域的左上角相对于整个元素左上角的位置,不包含padding，及borde值。
• element.clientWidth、element.clientHeight 元素的宽度和高度，不包括边框。
• element.scrollLeft、element.scrollTop 元素滚动的像素大小
• element.scrollWidth、element.scrollHeight 表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。scrollHeight应该等用于scrollTop + clientHeight。

4、关于距离的方法

• document.elementFromPoint() 接受两个参数x，y坐标，返回坐标位置的元素。这个方法可以用来检测元素是否发生重叠或是碰撞。
• element.getBoundingClientRect() 返回的是一个对象，包含 top, left, right, 和 bottom等属性值，大小都是相对于文档视图左上角计算而来

• element.getClientRects() 返回元素的数个矩形区域，返回的结果是个对象列表，具有数组特性。这里的矩形选区只针对inline box，因此，只针对a, span, em这类标签元素 几行就是几个
• element.scrollIntoView() 让元素滚动到可视区域内

5、结束

除特殊说明，以上所有都不考虑ie8以下版本浏览器，暂时只整理了这么多，如有遗漏，欢迎补充。谢谢?