一直以为offsetParent和parentElement是一回事，最近在做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><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>
分享到：
相关推荐
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。 这里主要说的是 offsetParent 属性，这个属性在 ...
当容器元素的style.display 被设置为 “none”时（译注：IE和Opera除外），offsetParent属性 返回 null。 句法：parentObj = element.offsetParent 变量：· parentObj 是一个元素的引用，当前元素的偏移
JavaScript offsetParent案例详解 1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 ...
offsetparent计算 offsetparent区分以下几种情况： 内部div不是relative/absolute，外部div是relative/absolute
主要介绍了jQuery中offsetParent()方法用法,实例分析了offsetParent()方法的功能、定义及返回匹配元素所有祖先元素中第一个采用定位的祖先元素时的使用技巧,需要的朋友可以参考下
第一篇就先讲讲Javascript中的offsetParent属性吧。 支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+ element.offsetParent Summary offsetParent returns a ...
ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素，如果没有父元素或者是父元素中没有一个是定位过的，返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题，分多种情况： ...
JavaScript offset实现鼠标坐标获取和窗口内模块拖动 offset 即偏移量，使用 offset 系列相关属性... 注意，parentNode 和 offsetParent 还是有本质上的区别的：parentNode 返回的是直接父级元素，offsetParent 返回
1、js通过样式的方法、了解parentElement和offsetParent的原理，自己的布局不一样，css也就不一样，这种方法是浏览器可能会比较慢的哦！！ 2、2\3方法都是用jquery也有仿excel的方法，自己也可以去网上找一找
当调用元素 A 的 offsetParent 属性时，必须按以下算法返回元素。 以下任一条件为真时，返回 null，并停止本算法。 A 是根元素。 A 是 HTML 的 body 元素。 元素 A 的 position 属性计算值是 fixed。注 1 如果 A 是 ...
上面用到了parentNode，这里顺便说说它跟offsetParent，parentElement的区别。 先看看parentNode在w3c的说明： The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a ...
先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对... 先来看看在jquery框架源码里面，是怎么获得position()的： 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /
这段代码会向上查找offsetParent，然后添加offsetTop和offsetLeft。最终无论offsetParent在哪，他都会给出你元素在屏幕上的真正坐标。 解释 这段代码非常简单。先传入要计算的元素，然后设置变量curleft和curtop为0...
代码如下: //取得元素x坐标 function pageX(elem) { return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft; } //取得元素y坐标 function pageY(elem) { return elem.offsetParent?...