很多初學者對於JavaScript中的offset、scroll、client一直弄不明白，雖然網上到處都可以看一張圖（圖1），但這張圖太多太雜，並且由於瀏覽器差異性，圖示也不完全正確。
圖一
不知道大家看到這張圖的第一感覺如何，反正我的感覺就是“這次第，怎一個亂字了得”。
既然我認爲上圖太多太亂，那麼我就把offset、scroll、client分開說，希望能讓大家徹底弄清楚，今天只說offset。
一、關於offset，我們要弄明白什麼
w3中offset相關頁面是：http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface
在這裏我們可以看到，關於offset共有5個東西需要弄清楚：
1、offsetParent
2、offsetTop
3、offsetLeft
4、offsetWidth
5、offsetHeight
我們根據難易程度把以上5點分爲三類來講解。
在分析之前，先來看段測試代碼：
<body> <style type="text/css"> body { border:20px solid #CCC; margin:10px; padding:40px; background:#EEE; } #test { width:400px; height:200px; padding:20px; background:#F60; border:5px solid #888; } </style> <div id="test"></div> <script> var test = document.getElementById("test"); test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" + "<p>offsetWidth:" + test.offsetWidth + "</p>" + "<p>offsetHeight:"+test.offsetHeight+"</p>"+ "<p>offsetLeft:"+test.offsetLeft+"</p>"+ "<p>offsetTop:"+test.offsetTop+"</p>"; </script> </body>
這段代碼在各個瀏覽器中的效果如圖：
圖二（IE6/7）
圖三（IE8/9/10）
圖四（Firefox）
圖五（Chrome）
二、offsetWidth與offsetHeight
大家可以看到，上面圖二~圖五中的共同點是 offsetWidth與offsetHeight是一致的，因此這裏放到地起講。
MDN中對offsetWidth的概述和描述是：
Returns the layout width of an element.
Typically, an element's
offsetWidthis a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
也就是元素的可視寬度，這個寬度包括元素的邊框(border)，水平padding，垂直滾動條寬度，元素本身寬度等。
offsetHeight跟offsetWidth類似，只是方向改爲垂直方向上的。
只是我們的示例中沒有水平和垂直滾動條。另外經過測試可以發現，即使元素加上水平或垂直滾動條，offsetWidth跟offsetHeight的值是不會更改的，因爲瀏覽器渲染時把滾動條的寬度（或高度）算在了元素本身的寬度（或高度）中了。
通過代碼及圖中數值，我們不難看出:
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
對這兩個概念就總結到這裏，大家現在弄明白了嗎？
三、offsetLeft與offsetTop
offsetWidth與offsetHeight有個特點，就是這兩個屬性的值只與該元素有關，與周圍元素（父級和子級元素無關）。
然而，offsetLeft與offsetTop卻不是這樣，這兩個屬性與offsetParent有關，但在我們講到offsetParent之前，我們先不管offsetParent是什麼及怎麼判斷，我們只要知道offsetLeft和offsetTop與offsetParent有關就行了，上面的示例中offsetParent就是body。
MSDN上對offsetLeft的定義是：
Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property
也就是返回對象元素邊界的左上角頂點相對於offsetParent的左上角頂點的水平偏移量。從這個定義中我們可以明確地知道offsetLeft與當前元素的margin-left和offsetParent的padding-left有關。也就是說應該是：
offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當前元素的margin-top)。
但通過上面的例子我們可以看到，當offsetParent爲body時，對於offsetLeft與offsetTop的值有三種，分別是：IE6/7中的40，IE8/9/10 和 Chrome中的70，以及FireFox中的50。
通過這些數值我們可以知道，當offsetParent爲body時情況比較特殊:
在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當前元素的margin-left)。
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當前元素的margin-left)。
四、offsetParent
終於到offsetParent了。
offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲根元素的引用。
總的來說兩條規則：
1、如果當前元素的父級元素沒有進行CSS定位（position爲absolute或relative），offsetParent爲body。
2、如果當前元素的父級元素中有CSS定位（position爲absolute或relative），offsetParent取最近的那個父級元素。
上面的示例就是第1條說的情況，我們來驗證一下：
我們把JS改爲(添加了一行代碼：紅色部分)：
var test = document.getElementById("test"); test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" + "<p>offsetParent:" + test.offsetParent.tagName + "</p>" + "<p>offsetWidth:" + test.offsetWidth + "</p>" + "<p>offsetHeight:"+test.offsetHeight+"</p>"+ "<p>offsetLeft:"+test.offsetLeft+"</p>"+ "<p>offsetTop:"+test.offsetTop+"</p>";
FireFox下的效果爲：
圖六
在其他瀏覽器中效果相同，都是body。
我們再來驗證一下第2條，測試HTML如下：
<!DOCTYPE html> <html> <head> <title>Demo</title> </head> <body> <style type="text/css"> body { margin:0; padding:0; background:#EEE; } div,ul,li { margin:0; } li { height:20px; line-height:20px; } #test { width:400px; height:250px; padding:20px; background:#F60; border:10px solid #888; } #divtest { margin:30px; position:relative; left:50px; top:70px; padding:20px; } </style> <div id="divtest"> <ul> <li>Test</li> <li>Test</li> </ul> <div id="test"> </div> </div> <script> var test = document.getElementById("test"); test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" + "<p>offsetParent:" + test.offsetParent.tagName + "</p>" + "<p>offsetWidth:" + test.offsetWidth + "</p>" + "<p>offsetHeight:"+test.offsetHeight+"</p>"+ "<p>offsetLeft:"+test.offsetLeft+"</p>"+ "<p>offsetTop:"+test.offsetTop+"</p>"; </script> </body> </html>
在FireFox中效果爲：
圖七
在其他瀏覽器中offsetParent也是一致的。
在這裏我們也可以看到，第三點中給出的offsetLeft的計算公式是適用的。
小結
以上的總結希望能對大家有所幫助，在看完本文內容後再回過頭來看文章開頭部分的那張圖(只看offset)部分，是不是清楚了很多？
最後，對於offsetParent爲body的情況，現在的主流瀏覽器IE8/9/10和Chrome及Firefox都跟定義
offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當前元素的margin-left)。offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當前元素的margin-top)。
