隨筆：offset、client、scroll的小總結

這段日子看到scrollTop,忽然想起了這三個小兄弟，因而看了不少文章，但發現總結的各有優缺和對錯，因而決定本身總結一下，僅當隨筆。有錯誤的歡迎指正。

這些屬性均是用於獲取頁面元素在網頁中的位置或相對位置，這裏又能夠簡單的分爲兩類用途：

           1.獲取頁面固定元素的位置；2.獲取鼠標點擊位置

先從頁面固定元素的位置提及，用法均是  element.屬性名  ：

       1.首先仍是來講說offset家族吧（offsetWidth、offsetHeight、offsetLeft和offsetTop）

offsetWidth是指元素的寬度（包括元素的邊框），或者說元素水平方向上佔用的空間大小。

offsetHeight是指元素的高度（包括元素的邊框），或者說元素垂直方向上佔用的空間大小。

offsetLeft:元素左外邊框到  上層元素或左側元素  之間的距離

offsetTop:元素上外邊框到  上層元素或左側元素  之間的距離

         width和height很好理解，只需注意他是包含邊框寬度的；

         關鍵在於Left和Top極可能有坑會出現，其實目前發現寫也就兩種狀況：

                    1.對於普通元素。就是距離其左側最近的兄弟元素或父元素的距離

                    2.對於position:absolute 等脫離文檔流的，就要看其left和top屬性了

        2.client家族 （clientWidth、clientHeight、clientLeft和clientTop）

              瞭解了offset，其實client很簡單。

              clientWidth和clientHeight是不含邊框厚度的寬高

              clientLeft和ClientTop則能獲取到邊框的厚度

         3.scroll家族（scrollTop、scrollLeft、scrollWidth和scrollHeight）

             正如offset和client在document.body元素上沒有什麼實際意義很少說了，

             scroll家族 主要用於document.body元素上， 用在頁面元素上並無什麼特殊體現

             當頁面出現上下或左右滑動條時，scroll的做用就體現出來了：

      document.body.scrollWidth和document.body.scrollHeight就是頁面可視區域的大小了，

     document.body.scrollLeft和document.bodyscrollTop就是可視區離整個文檔的左、頂側的距離。

        最後關於這三者的總結就是 :

                    要找某個元素的位置和大小：用elem.offset；

                    要找涉及到元素的邊框厚度：用elem.client  ;

                    要涉及到滾輪和可視區大小、距離，用：document.body.scroll ； 

        另外，對於事件對象e的幾個獲取鼠標位置的屬性，是這樣的（事件觸發時傳入並使用）：

         相對於屏幕左上角: e.screenX/screenY          相對於文檔顯示區左上角: e.clientX/clientY          相對於所在元素左上角的座標:e.offsetX/offsetY