JS: 关于元素大小和距离的有关的属性总结

Element的属性中关于距离的属性

1. 偏移量

   offsetHeight：元素在垂直方向上所占空间的大小，包括(上下边框和水平滚动条的高度,不包括外边距)
   offsetWidth：元素在水平方向上所占空间的大小，包括(左右边框和垂直滚动条的宽度)
   offsetLeft：元素的左外边框与包含元素的左内边框的距离
   offsetTop：元素的上外边框与包含元素的上内边框的距离
   offsetparent：距离元素最近的并且具有大小的元素
   

   如果想知道某个元素在页面上的偏移量，只需要将这个元素的offsetTop或者offsetLeft与offsetparent的相同属性相加，不断迭代至根元素，就可以得到基本准确的值。

2. 客户区大小

   clientWidth：元素左内边框到元素右内边框的距离(内容区加内边距)
   clientHeight：元素上内边框到元素下内边框的距离(同上)
   

   指的元素内容以及元素内边距所占空间的大小

3. 滚动大小

   scrollHeight：没有滚动条的情况下，元素内容的总高度(内容区加内边距)
   scrollWidth：没有滚动条的情况下，元素内容的总宽度(同上)
   scrollLeft：被隐藏在元素内容区域左侧的像素数，通过设置这个可以改变元素的滚动位置
   scrollTop：被隐藏在元素内容区域上方的像素数，通过设置这个可以改变元素的滚动位置
   

   带有垂直滚动条的页面中，document.documentElement.scrollHeight就是页面内容区总高度，在没有滚动条的页面中，则document.documentElement.scrollHeight指定的值随浏览器不确定，在chrome中，document.documentElement.scrollHeight指的是视口高度，document.documentElement.scrollWidth指的是视口宽度。

   我用chrome测试了一下，发现scrollHeight和offsetHeight好像一直是相同的值。

4. DOMRect

   bottom:1028 height:1020 left:8 right:928 top:8 width:920 x:8 y:8 

   在元素中调用getBoundingClientRect()会返回含有以上参数的DOMRect对象，top,bottom表示元素上/下内边框到视口顶端距离，left和right表示元素左/右内边框到视口左端距离。感觉这个api很方便，以后就用它了。

event中关于距离属性

当触发鼠标事件的时候，事件对象会有一些属性帮助定位鼠标指针

1. 客户区坐标位置

   clientX:鼠标指针在视口中的水平坐标 clientY:鼠标指针在视口中的垂直坐标 

2. 屏幕坐标位置

   screenX:鼠标指针在屏幕(桌面)中的水平坐标 screenY:鼠标指针在屏幕中的垂直坐标 

3. 偏移量

   offsetX:光标相对于目标元素(event.target指向的元素；触发该事件的元素)边界(内边框)的x坐标 offsetY:光标相对于目标元素边界的y坐标 

   当光标指针在目标元素的内边框之外，外外边距之内的时候，offsetX/Y为负值。