offsetParent和parentElement的区别

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><div id="parentdiv" style="position:relative" >parentdiv<div id="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<div id="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<div id="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<div id="sondiv"　style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>

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

sondiv.offsetParent.tagName IS　"parentdiv"

offsetParent和parentElement的区别相关推荐

[JavaScript][转]offsetParent和parentElement的区别
作者:未知来源于:网络转载发布时间:2006-9-30 23:42:32 一直以为offsetParent和parentElement是一回事,最近在做web控件才发现原来的理解是大错特错. ...
js中parentNode和parentElement的区别和用法
了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看<js节点都有哪些类型?怎么判断是哪种节点类型?>和<js属性节点获取和移除>,下面直接 ...
JS中parentNode和parentElement的区别
参考文章以一个网页作为例子: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
offsetParent与parentElement ,parentNode,parentElement,childNodes和children
offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如: <BODY> <div ...
offsetParent与parentElement
offsetParent 指的是是影响元素位置的上级element,而parentElement则是与位置显示无关时dom中的上级element. 例如: <body><div st ...
parentNode和parentElement的区别
首先了解parentNode,parentElement属性之前,必须对DOM树有一定的了解.在DOM文档结构中,HTML页面每一部分都是由节点组成的,节点的类型一共有3种,元素节点,文本节点,属性节 ...
parentElement 与 parentNode 的区别
首先,您需要知道元素和节点之间的区别.总之,元素是一种特殊类型的节点,它表示 DOM 树中的单个节点.它不仅可以是元素,还可以是注释.文档.文本节点等. 在大多数情况下,parentElement 和 ...
Javascript中parentElement和parentNode的区别
parentNode和parentElement的区别第一点:parentNode跟parentElement,前者是w3c标准,后者只ie支持. parentElement是ie专用的,就是说在f ...
vb.net 打开ie 传参数_FF与IE对javascript和CSS的区别？
1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName& ...

offsetParent和parentElement的区别

offsetParent和parentElement的区别相关推荐

最新文章

热门文章