js中元素、触点等各种距离的总结

　　每次碰到元素滚动呀、鼠标拖动呀之类的通过对比位置来触发事件的需求时，都要花很多时间来百度怎么取到自己想要的那个值，什么scrollTop、offset等等，今天就把这些东西总结一下，以后再使用的话，就不用各种的百度了。

一，window窗口的各种距离

　　screen.width/height：屏幕的宽度/高度

　　window.innerWidth/innerHeight ：窗口显示区的宽度/高度

　　window.outerWidth/outerHeight ：窗口的外部宽度/高度

　　window.pageXOffset/pageYOffset ：当前页面相对于窗口显示区左上角的 X 位置 / Y 位置

　　window.screenLeft/screenTop ：当前窗口的左上角在屏幕上的的 x 坐标和 y 坐标； Firefox支持screenX和screenY。

二，元素的各种距离（常用）

　　1，el.style.width / height / left / right：

<div style="width: 100px;height: 100px;"></div>

　　　　获取元素内联样式的宽度/高度/left值/right值。如果元素上没写内联样式则返回空字符串（不包括padding、border和margin，并且返回的值会带单位）

　　2，window.getComputedStyle().width / height / left / right：

　　　　获取元素最终经过浏览器计算出来的width height left right。（不包括padding、border和margin，并且返回的值会带单位）

　　3，el.offsetWidth / offsetHeight ：获取元素的宽度/高度。（包括padding、border）

　　4，el.offsetTop / offsetLeft：获取元素距离最近的采用定位的祖先元素的 top/Left，如果祖先元素没有采用定位的，则计算到body的距离。

　　5，el.clientWidth / clientHeight / clientLeft / clientTop ：获取当前元素的内部宽度/内部高度/左边框宽度/上边框宽度（包含padding，如果有滚动条，则要去掉滚动条的宽度）

　　6，el.scrollWidth/scrollHeight ：如果没有滚动条，则和clientWidth/height的值一样，如果有滚动条，则为内部元素的总高度/宽度（包含padding，有滚动条则去掉滚动条的宽度）

　　7，el.scrollTop/scrollLeft ：此属性为可读写属性，为元素离父元素的滚动高度和滚动左边距。也可以设置当前元素的滚动高度。（返回的值不带单位）

三：触点的距离

　　　　（这里的触点就是事件中event对象所包含的各种位置信息。）

　　pageX pageY ：这两个是距离本页面左部和顶部的距离，即使页面有滚动，也包括滚动的距离

　　clientX， clientY 这也是距离页面左部和顶部的距离，如果页面没有滚动条，它俩的值和pageX pageY相同，如果有滚动条不包含滚动的距离！

　　offsetX offsetY ：距离当前元素的左部和顶部的距离

　　screenX screenY ：获取当前触点到当前屏幕的x坐标和y坐标。

　　layerX layerY ：获取当前触点到最近的采用定位的祖先元素的 x和y坐标。如果祖先元素没有定位元素，则以body元素为基准。

　　x y ：返回当前触点相对于可视区域的 x坐标和y坐标。

　　offsetX / offsetY：　W3C- IE+ Firefox- Opera+ Safari+ chrome+

　　x / y：　　　　　　 W3C- IE+ Firefox- Opera+ Safari+ chrome+

　　layerX/layerY：　　 W3C- IE- Firefox+ Opera- Safari+ chrome+

　　pageX/pageY：　　 W3C- IE- Firefox+ Opera+ Safari+ chrome+

　　clientX/clientY：　　W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

　　screenX/screenY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

只有 clientX/ clientY 和 screenX/ screenY 是标准并且所有的都兼容，其他的如果要使用，请做兼容处理吧