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