必威体育Betway必威体育官网
当前位置:首页 > IT技术

offsetParent和parentElement的区别

时间:2019-11-03 23:42:11来源:IT技术作者:seo实验室小编阅读:70次「手机版」
 

parentelement

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

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

而offsetParent在msdn的解释是Retrieves a reference to the container object that 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 property returns the TABLE object for the TD object; in Microsoft® Internet Explorer 4.0 it returns the TR object. You can use the parentElement property 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><p id="parentp" style="position:relative" >parentp<p id="sonp">sonp</p></p></TD>

  </TR>

</TABLE>

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

    sonp.offsetParent.id     IS "parentp" 

2.<BODY >

<TABLE BORDER=1 ALIGN=right>

  <TR>

<TD ID=oCell><p id="parentp" style="position:relative" >parentp<p id="sonp" style="position:relative">sonp</p></p></TD>

  </TR>

</TABLE> 

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

    sonp.offsetParent.id     IS "parentp"

3.<BODY >

<TABLE BORDER=1 ALIGN=right>

  <TR>

<TD ID=oCell><p id="parentp" >parentp<p id="sonp" style="position:relative">sonp</p></p></TD>

  </TR>

</TABLE> 

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

    sonp.offsetParent.tagName    IS "body"

4.<BODY >

<TABLE BORDER=1 ALIGN=right>

  <TR>

<TD ID=oCell><p id="parentp" >parentp<p id="sonp">sonp</p></p></TD>

  </TR>

</TABLE> 

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

    sonp.offsetParent.tagName    IS "TD"

5.<BODY >

<TABLE BORDER=1 ALIGN=right style="position:relative">

  <TR>

<TD ID=oCell><p id="parentp" style="position:relative" >parentp<p id="sonp" style="position:relative">sonp</p></p></TD>

  </TR>

</TABLE> 

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

    sonp.offsetParent.tagName    IS "parentp" 

转载http://www.cnblogs.com/Godblessyou

文章最后发布于: 2013-10-08 17:46:41

相关阅读

parentNode与offsetParent区别

offsetParent  指与位置有关的上级元素  只读parentNode  指与位置无关的上级元素   只读 offsetParent直接的将是影响元素位

深度剖析offsetParent、offsetTop、offsetLeft和Paren

深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别 ParentNode:是直接结构上的父级,并不是显示父级offsetParent:有

分享到:

栏目导航

推荐阅读

热门阅读