Js中那些高和宽的事儿

关于偏移量

offsetParent：定位父级
offsetHeight/offsetWidth
offsetLeft/offsetTop

offsetParent:与当前元素最近的经过定位(position不等于static)的父级元素

• 元素自身有fixed定位，offsetParent的结果为null
  当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null。
• 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为body。

• 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素。

• body元素的parentNode是null。

offsetHeight/offsetWidth：

均表示是自身的高度/宽度，如果有设置boder的话还应该加上boder的值。如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度。

offsetTop/offsetLeft：

offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离；offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离。

所有偏移量都是只读的
如果设置了display为none，则偏移量为0

参考深入理解定位父级offsetParent及偏移大小

Event对象的一些长度

图片源自网络：

clientX/clientY：

设置或获取鼠标指针位置相对于窗口客户区域的 x /y坐标，其中客户区域不包括窗口自身的控件和滚动条。

offsetX/offsetY：

设置或获取鼠标指针位置相对于触发事件的（this）对象的 x/y坐标。

screenX/screenY：

设置或获取获取鼠标指针位置相对于用户屏幕的 x/y坐标。

其他

clientHeight/clientWidth：

可见区域的高度/宽度，不包括boder的宽度,如果区域内带有滚动条，还应该减去横向/纵向滚动条不可用的高度/宽度，正常的是17px，其实就是滚动条的可滚动的部分了，其实clientHeight与height的高度差不多，如果不带滚动条的话他们的值都是一样的，如果带有滚动条的话就会比height值少17px；火狐与IE下均为一致。

scrollHeight/scrollWidth：

scrollHeight和scrollWidth返回值分别是元素的实际高度和实际宽度，不包括滚动条所占用的空间。

scrollLeft/scrollTop：该元素的显示（可见）的内容与该元素实际的内容的距离

即设置scrollleft就如同你拖动水平滚动条一样。假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大。简单了说：元素会从scrollLeft的位置显示该元素的内容。
假如不懂的话，你就把元素的所有内容都在纸画出拉，元素的最左边为0,显示的宽度为10,那就就能看到0-10的位置，假如scrollLeft为20的话，你就能看到从20的位置开始显示，向后显示10个
那么scrollTop和scrollLeft一样，只不过变成了垂直了而已。
实现内容的滚动效果（其中内容可以是任何东西：图片，文字，等等）

图片源自网络：