今天再次遇到了offset***、client***、scroll***的這三類屬性的問題，總是混淆，現歸納總結如下： 大體上來說可以這樣理解： client***屬性（clientWidth、clientHeight）: 表示元素可以看到內容的可見區域部分，一般是最後一個對象條以下到狀況欄以上的這 ...
今天再次遇到了offset***、client***、scroll***的這三類屬性的問題，總是混淆，現歸納總結如下：
大體上來說可以這樣理解：
client***屬性（clientWidth、clientHeight）:
表示元素可以看到內容的可見區域部分，一般是最後一個對象條以下到狀況欄以上的這個區域，與頁面內容無關。且它會直接返回屬性的數值大小，可直接進行計算。分開說的話也可以這樣理解：若元素大小小於父元素，大小包括padding、content部分，不包括border；若元素大小大於父元素，則表示可以看到的部分的高或寬。
offset***屬性（offsetWidth、offsetHeight、offsetTop、offsetLeft）：
對於offsetWidth和offsetHeight，都表示當前對象的寬度/高度。offsetWidth與style.widtht的區別是：若對象的寬度設定值為百分百寬度，無論頁面變大或變小，style.width都返回此百分比；而offsetWidth則返回頁面中對象的寬度值而不是百分比。
對於offsetTop和offsetLeft，都表示當前元素對象相對於其定位元素的垂直/水平偏移量。
scroll***屬性（scrollTop、scrollLeft、scrollHeight、scrollWidth）:
scroll是滾動條的意思，也就是scrollWidth、scrollHeight屬性代表元素對象真實的寬高，即使有一部分看不到；scrollTop、scrollLeft代表元素對象最頂端/最左端到對象到當前視窗顯示的局限內的距頂部/左邊距的間隔，也是垂直/水平滾動條滾動了的距離。
有兩個關係式是：
scrollHeight - scrollTop = clientHeight：當這兩個條件成立時，也就代表垂直滾動條走到底了
scrollWidth - scrollLeft = clientWidth：當這兩個條件成立時，也就代表水平滾動條走到底了
以上就是本人對以上屬性元素的理解總結，如有錯誤之處，煩請指出，大家共同進步。
