網(wǎng)站建設(shè)如何提高瀏覽量廣州30萬人感染
很多初學(xué)者對(duì)于JavaScript中的offset、scroll、client一直弄不明白，雖然網(wǎng)上到處都可以看一張圖（圖1），但這張圖太多太雜，并且由于瀏覽器差異性，圖示也不完全正確。
圖一
不知道大家看到這張圖的第一感覺如何，反正我的感覺就是“這次第，怎一個(gè)亂字了得”。
既然我認(rèn)為上圖太多太亂，那么我就把offset、scroll、client分開說，希望能讓大家徹底弄清楚，今天只說offset。
一、關(guān)于offset，我們要弄明白什么
w3中offset相關(guān)頁面是：http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface
在這里我們可以看到，關(guān)于offset共有5個(gè)東西需要弄清楚：
1、offsetParent
2、offsetTop
3、offsetLeft
4、offsetWidth
5、offsetHeight
我們根據(jù)難易程度把以上5點(diǎn)分為三類來講解。
在分析之前，先來看段測(cè)試代碼：
<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>
這段代碼在各個(gè)瀏覽器中的效果如圖：
圖二（IE6/7）
?
圖三（IE8/9/10）
?
圖四（Firefox）
?
圖五（Chrome）
二、offsetWidth與offsetHeight
大家可以看到，上面圖二~圖五中的共同點(diǎn)是 offsetWidth與offsetHeight是一致的，因此這里放到地起講。
MDN中對(duì)offsetWidth的概述和描述是：
Returns the layout width of an element.
Typically, an element's?
offsetWidth?is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
也就是元素的可視寬度，這個(gè)寬度包括元素的邊框(border)，水平padding，垂直滾動(dòng)條寬度，元素本身寬度等。
offsetHeight跟offsetWidth類似，只是方向改為垂直方向上的。
只是我們的示例中沒有水平和垂直滾動(dòng)條。另外經(jīng)過測(cè)試可以發(fā)現(xiàn)，即使元素加上水平或垂直滾動(dòng)條，offsetWidth跟offsetHeight的值是不會(huì)更改的，因?yàn)闉g覽器渲染時(shí)把滾動(dòng)條的寬度（或高度）算在了元素本身的寬度（或高度）中了。
通過代碼及圖中數(shù)值，我們不難看出:
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
對(duì)這兩個(gè)概念就總結(jié)到這里，大家現(xiàn)在弄明白了嗎？
三、offsetLeft與offsetTop
offsetWidth與offsetHeight有個(gè)特點(diǎn)，就是這兩個(gè)屬性的值只與該元素有關(guān)，與周圍元素（父級(jí)和子級(jí)元素?zé)o關(guān)）。
然而，offsetLeft與offsetTop卻不是這樣，這兩個(gè)屬性與offsetParent有關(guān)，但在我們講到offsetParent之前，我們先不管offsetParent是什么及怎么判斷，我們只要知道offsetLeft和offsetTop與offsetParent有關(guān)就行了，上面的示例中offsetParent就是body。
MSDN上對(duì)offsetLeft的定義是：
Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property
也就是返回對(duì)象元素邊界的左上角頂點(diǎn)相對(duì)于offsetParent的左上角頂點(diǎn)的水平偏移量。從這個(gè)定義中我們可以明確地知道offsetLeft與當(dāng)前元素的margin-left和offsetParent的padding-left有關(guān)。也就是說應(yīng)該是：
offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當(dāng)前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當(dāng)前元素的margin-top)。
但通過上面的例子我們可以看到，當(dāng)offsetParent為body時(shí)，對(duì)于offsetLeft與offsetTop的值有三種，分別是：IE6/7中的40，IE8/9/10 和 Chrome中的70，以及FireFox中的50。
通過這些數(shù)值我們可以知道，當(dāng)offsetParent為body時(shí)情況比較特殊:
在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當(dāng)前元素的margin-left)。
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當(dāng)前元素的margin-left)。
四、offsetParent
終于到offsetParent了。
offsetParent屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進(jìn)行過CSS定位的容器元素。 如果這個(gè)容器元素未進(jìn)行CSS定位, 則offsetParent屬性的取值為根元素的引用。
總的來說兩條規(guī)則：
1、如果當(dāng)前元素的父級(jí)元素沒有進(jìn)行CSS定位（position為absolute或relative），offsetParent為body。
2、如果當(dāng)前元素的父級(jí)元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個(gè)父級(jí)元素。
上面的示例就是第1條說的情況，我們來驗(yàn)證一下：
我們把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。
我們?cè)賮眚?yàn)證一下第2條，測(cè)試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也是一致的。
在這里我們也可以看到，第三點(diǎn)中給出的offsetLeft的計(jì)算公式是適用的。
小結(jié)
以上的總結(jié)希望能對(duì)大家有所幫助，在看完本文內(nèi)容后再回過頭來看文章開頭部分的那張圖(只看offset)部分，是不是清楚了很多？
最后，對(duì)于offsetParent為body的情況，現(xiàn)在的主流瀏覽器IE8/9/10和Chrome及Firefox都跟定義
????? offsetLeft=(offsetParent的padding-left)+(中間元素的offsetWidth)+(當(dāng)前元素的margin-left)。offsetTop=(offsetParent的padding-top)+(中間元素的offsetHeight)+(當(dāng)前元素的margin-top)。
的不一樣，對(duì)于這一點(diǎn)我也沒有弄明白，如果有朋友知道請(qǐng)不吝賜教。
本文轉(zhuǎn)自：http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html 謝謝~