web开发学习总结之js各种距离总结

1 元素的尺寸、位置

1.1 offsetLeft和offsetTop

oDiv.offsetLeft()
oDiv.offsetTop()

返回值都是数值。

一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离。

那么谁是自己的offsetParent呢？不同浏览器有差异，如图。

	IE8	IE9、IE9+、高级浏览器
offsetParent	和高级浏览器一致	自己祖先元素中，离自己最近的已经定位的元素
offsetLeft	多算一条border	自己的border外到offsetParet对象的border内

最好的使用方式：
自定位，父无边 (父亲也要定位，但是为了顺口，就不多说了)
这样使用，所有浏览器的值都是一样的。

1.2 clientWidth和clientHeight

都是数值。
clientWidth就是自己的width+padding的值。 比offsetWidth少了border。

1.3 offsetWidth和offsetHeight

全线兼容。都是数值。
一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度。

2 event对象的鼠标当前位置

全线兼容，表示事件触发这一瞬间的鼠标位置。

• event.clientX                //鼠标到视口，距离浏览器窗口左边边的距离
• event.clientY
• event.screenX               //鼠标到屏幕，距离屏幕左边边的距离
• event.screenY
• event.offsetX                //在盒子内的位置，鼠标到最小盒子的左上角
• event.offsetY
  

3 窗口相关的距离

• 卷动值
  document.body.scrollTop
  document.documentElement.scrollTop
• 视口宽度（浏览器窗口文档显示区域的宽度，不包括滚动条）
  document.body.clientWidth
  document.documentElement.clientWidth 获取。