offset,client,scroll的不同之處

1.offsetWidth、offsetHeight、offsetLeft和offsetTop offset – 位移 用於擷取元素自身的位置和大小，在網頁特效中有廣泛應用 offsetWidth和offsetHeight對象自身的的寬度/高度 offsetWidth和offsetHeight屬性的構成。
offsetWidth = width + border + padding
offsetHeight = height + border + padding

 - offsetHeight 與 style.height 的區別。 - i.獲得的值的意義不同     - 1.offsetHeight：擷取元素的真實高度     - 2.style.height：只能擷取行內樣式，如果樣式寫到了其他地方，甚至根本就沒寫，便無法獲 取 - ii.獲得的值的類型不同：     - 1.offsetHeight：數實值型別     - .style.height：字串（而且帶單位） - iii.使用方式的不同     - 1.offseHeight：唯讀屬性 只能擷取屬性值 不能設定元素的高度     - 2.style.height：能擷取、設定行內的height屬性值

offsetParent 距離當前對象最近的並有定位的父級元素，若無則返回body
- offsetLeft和offsetTop
用來擷取對象的位置(注意沒有right和bottom)
2.client
- client – 可視
- 用於擷取元素可視地區（客戶區）的大小
- clientWidth和clientHeight

clientWidth = width + padding(自身)
scrollWidth = width + padding(內容)
offsetWidth = width + padding + border

clientLeft和clientTop
他們通常就是border（如果有捲軸會包含捲軸的寬度）

網頁可視區寬高的幾種擷取方式：
正常瀏覽器（除了IE678外的瀏覽器）
window.innerWidth
已經聲明DTD（標準模式）
document.documentElement.clientWidth
未聲明 DTD（怪異模式）
document.body.clientWidth

相容寫法：

var clientWidth = window.innerWidth                                 ||document.documentElement.clientWidth|| document.body.clientWidth|| 0;

3.scroll scroll – 滾動 用於擷取元素內容的大小和位置 scrollHeight和scrollWidth
對象內部實際內容的高度/寬度
scrollTop和scrollLeft
用來擷取對象被捲去部分的 頂部/左側 到可視地區 頂部/左側 的距離 onscroll事件：每滾動一像素都會觸發該事件
頁面滾動座標的相容寫法

正常瀏覽器（除了IE678外的瀏覽器）window.pageYOffset已經聲明DTD（標準模式）document.documentElement.scrollTop未聲明 DTD（怪異模式）document.body.scrollTop

相容寫法：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;