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为负值。