offset、client、scroll开头的属性概括总结

　　HTML元素有几个offset、client、scroll开头的属性，老是让人摸不着头脑。在书中看到记下来，分享给须要的小伙伴。主要是如下几个属性：

　　第一组：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

　  第二组：clientWidth,clientHeight,clientLeft,clientTop

　　第三组：scrollWidth,scrollHeight,scrollLeft,scrollTop

　　详细定义以下：

　　1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回它的屏幕尺寸，包含元素的边框和内边距，不包含外边距。

　　1.2 offsetLeft和offsetTop属性返回元素的X和Y坐标。一般，它们返回值便是文档坐标。但对于已定位元素的后代元素和一些其余元素（如表格单元），这些属性返回的坐标是相对于祖先元素的而非文档。

　　1.3 offsetParent属性指定offsetLeft,offsetTop相对的父元素。若是offsetParent为null，后二者的返回值则为文档坐标。所以通常来讲，用offsetLeft和offsetTop来计算元素e的位置须要一个循环：

//计算元素的文档坐标
function getElementPosition(e){
    var x=0,y=0;
    while(e !=null){
        x +=e.offsetLeft;
        y +=e.offsetTop;
        e=e.offsetParent;  
    }
    return {x:x, y:y} ;   
} 

　　该方法计算的位置也不老是正确的，推荐使用内置的getBoundingClientRect()方法。

　　2.1 clientWidth和clientHeight相似于offsetWidth和offsetHeight属性，不一样的是它们不包含边框大小，只包含内容和内边距。同时，若是浏览器在内边距和边框之间添加了滚动条，clientWidth和clientHeight的返回值也不包含滚动条。注意，对于类型<i>,<code>和<span>这些内联元素，clientWidth和clientHeight老是返回0。

　　2.2 clientLeft和clientTop返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，一般这些值就等于左边和上边的边框宽度。可是若是元素有滚动条，而且浏览器将这些滚动条旋转在左侧或顶部，他们就还包含了滚动条的宽度。对于内联元素，它们老是为0。一般clientLeft和clientTop用处不大。

　　3.1 scrollWidth和scollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容正好和内容区域匹配而没有溢出时，这些属性与clientWidth和clientHeight是相等的。但当溢出时，它们就包含溢出的内容，返回值比clientWidth和clientHeight要大。

　　3.2 scrollLeft和scrollTop指定元素的滚动条的位置。注意，scrollLeft和scrollTop是可写的，经过设置它们来让元素中的内容滚动(HTML元素并无相似Window对象的scrollTo()方法)。

 

 

  来源于《JavaScript权威指南》 15.8.5