前端攻城獅學習筆記九：讓你徹底弄清offset
很多初學者對於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)。
的不一樣，對於這一點我也沒有弄明白，如果有朋友知道請不吝賜教。
轉自：http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html
前端攻城獅學習筆記九：讓你徹底弄清offset