偏移量(offset dimension)是javascript中的一個重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth這四個屬性。當然，還有一個偏移參照——定位父級offsetParent。本文将詳細介紹該部分内容
在了解偏移大小之前，首先要了解offsetParent。人們并沒有把offsetParent翻譯為偏移父級，而是翻譯成定位父級，很大原因是offsetParent與定位有關
定位父級offsetParent的定義是：與目前元素最近的經過定位(position不等于static)的父級元素，主要分為下列幾種情況
【1】元素自身有fixed定位，offsetParent的結果為null
當元素自身有fixed固定定位時，我們知道固定定位的元素相對于視口進行定位，此時沒有定位父級，offsetParent的結果為null
[注意]firefox浏覽器有相容性問題
【2】元素自身無fixed定位，且父級元素都未經過定位，offsetParent的結果為<body>
【3】元素自身無fixed定位，且父級元素存在經過定位的元素，offsetParent的結果為離自身元素最近的經過定位的父級元素
【4】<body>元素的parentNode是null
IE7-浏覽器Bug
對于定位父級offsetParent來說，IE7-浏覽器存在以下bug
【bug1】當元素本身經過絕對定位或相對定位，且父級元素無經過定位的元素時，IE7-浏覽器下，offsetParent是<html>
【bug2】如果父級元素存在觸發haslayout的元素或經過定位的元素，且offsetParent的結果為離自身元素最近的經過定位或觸發haslayout的父級元素
[注意]關于haslayout的詳細資訊移步至此
偏移量共包括offsetHeight、offsetWidth、offsetLeft、offsetTop這四個屬性
offsetWidth
offsetWidth表示元素在水準方向上占用的空間大小，無機關(以像素px計)
offsetHeight
offsetHeight表示元素在垂直方向上占用的空間大小，無機關(以像素px計)
[注意]如果存在垂直滾動條，offsetWidth也包括垂直滾動條的寬度；如果存在水準滾動條，offsetHeight也包括水準滾動條的高度
offsetTop
offsetTop表示元素的上外邊框至offsetParent元素的上内邊框之間的像素距離
offsetLeft
offsetLeft表示元素的左外邊框至offsetParent元素的左内邊框之間的像素距離
IE7-Bug
IE7-浏覽器在offsetTop屬性的處理上存在bug
【1】若父級設定position: relative，則在IE7-浏覽器下，offsetTop值為offsetParent元素的paddingBottom值
【2】若父級設定position: aboslute(或其他觸發haslayout的條件)，offsetTop值為offsetParent元素的paddingBottom值和目前元素的marginTop值的較大值
要知道某個元素在頁面上的偏移量，将這個元素的offsetLeft和offsetTop與其offsetParent的相同屬性相加，并加上offsetParent的相應方向的邊框，如此循環直到根元素，就可以得到元素到頁面的偏移量
[注意]在預設情況下，IE8-浏覽器下如果使用currentStyle()方法擷取<html>和<body>(甚至普通div元素)的邊框寬度都是medium，而如果使用clientLeft(或clientTop)擷取邊框寬度，則是實際的數值
【1】所有偏移量屬性都是隻讀的
【2】如果給元素設定了display:none，則它的偏移量屬性都為0
【3】每次通路偏移量屬性都需要重新計算
由上面代碼對比可知，重複通路偏移量屬性需要耗費大量的性能，是以要盡量避免重複通路這些屬性。如果需要重複通路，則把它們的值儲存在變量中，以提高性能