offset / scroll / client Left / Top

1.offsetHeight / Width （只讀）

　　offsetHeight：表示該元素在垂直方向佔用的空間大小，包含元素的高度+上邊框高度+下邊框高度

　　offsetWidth：表示該元素在水平方向佔用的空間大小，包含元素的寬度+左邊框寬度+右邊框寬度

2.clientHeight / clientWidth （只讀）

　　clientHeight：元素內容區的高度+元素內邊距的高度

　　clientWidth：元素內容區的寬度+元素內邊距的寬度

 

　　clientWidth = width + padding
　　offsetWidth = width + padding + border = client + border

　　注：該元素未設置：box-sizing：border-box

3.scrollHeight / scrollWidth

　　無滾動條的狀況下，與client類似，但不一樣瀏覽器有不一樣的差異

　　在滾動條存在的狀況下，等於client + 滾動條所蜷縮的高度或寬度

總結：

　　在肯定文檔的總高度時，必須取得scrollWidth / clientWidth 和 scrollHeight / clientHeight 中的最大值，才能保證跨瀏覽器的環境下獲得精確的結果

　

　var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

　var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

　　注意：在混雜模式下的IE，須要用document.body代替document.documentElement

4.scrollTop / scrollLeft

　　獲取滾動條滾動的距離

5.offsetLeft / offsetTop （只讀，而且沒有單位）

　　offsetLeft ：元素的左外邊框至包含元素的左內邊框之間的像素距離

　　offsetTop ： 元素的上外邊框至包含元素的上內邊框之間的像素距離

　　只能經過style.left / top來修改