offset屬性在各版本瀏覽器中的不同算法


在這里我們可以看到,關於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 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.

  也就是元素的可視寬度,這個寬度包括元素的邊框(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)。

  的不一樣。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM