[转]offsetParent和parentElement的区别

来源：互联网发布：淘宝买到二手货怎么办编辑：程序博客网时间：2024/05/21 01:59

一直以为offsetParent和parentElement是一回事，最近在做web控件才发现原来的理解是大错特错。

parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy.

而offsetParent在msdn的解释是Retrieves a reference to the container objectthat defines the offsetTop and offsetLeft properties of the object.这个解释有些模糊。我们再来看看他的remarks

Most of the time the offsetParent property returns the body object.

大多说offsetParent返回body

Note In Microsoft® Internet Explorer 5, the offsetParent propertyreturns the TABLE object for the TD object; in Microsoft® InternetExplorer 4.0 it returns the TR object. You can use the parentElementproperty to retrieve the immediate container of the table cell.

对于IE 5.0以上，TD的offsetParent返回Table。

但是msdn并没有讨论在页面td元素中存在绝对/相对定位时offsetParent的值。

以下是我个人总结的规律

在td中的元素会把第一个绝对／相对定位的hierarchy parent当作offsetParent，如果没有找到需要分三种情况讨论

　　一，如果该元素没有绝对／相对定位，则会把td当作offsetParent

　　二，如果该元素绝对／相对定位并且table没有绝对／相对定位，则会把body当作offsetParent

　　三，如果该元素绝对／相对定位并且table绝对／相对定位，则会把table当作offsetParent

看一下示例代码

1.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv"style="position:relative" >parentdiv<divid="sondiv">sondiv</div></div></TD>
   </TR>
</TABLE>

运行结果parentdiv.offsetParent.tagName IS "body"

                 sondiv.offsetParent.id     IS　"parentdiv"

2.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv"style="position:relative" >parentdiv<divid="sondiv"　style="position:relative">sondiv</div></div></TD>
   </TR>
</TABLE>

运行结果parentdiv.offsetParent.tagName IS "body"

                 sondiv.offsetParent.id     IS　"parentdiv"

3.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv" >parentdiv<divid="sondiv"　style="position:relative">sondiv</div></div></TD>
   </TR>
</TABLE>

运行结果parentdiv.offsetParent.tagName IS "TD"

                 sondiv.offsetParent.tagName    IS　"body"

4.<BODY >
<TABLE BORDER=1 ALIGN=right>
   <TR>
     <TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
   </TR>
</TABLE>

运行结果parentdiv.offsetParent.tagName IS "TD"

                 sondiv.offsetParent.tagName    IS　"TD"

5.<BODY >
<TABLE BORDER=1 ALIGN=right style="position:relative">
   <TR>
     <TD ID=oCell><div id="parentdiv"style="position:relative" >parentdiv<divid="sondiv"　style="position:relative">sondiv</div></div></TD>
   </TR>
</TABLE>

运行结果parentdiv.offsetParent.tagName IS "Table"

                 sondiv.offsetParent.tagName    IS　"parentdiv"