一直以为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.
在JavaScript中，`parentElement`和`offsetParent`都是用于处理元素上下级关系的属性，但它们的作用和应用场景有所不同。本文将深入解析这两个属性的区别及其使用。 首先，`parentElement`属性是DOM层次结构的一...
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); background-color: #E6ECF0; } ``` ### 实现细节 - **使用`expression`**: 虽然在现代前端开发中，直接使用`expression`并不被...
10. **parentWindow**、**parentElement** 和 **parentNode**：分别指向元素的父级窗口、父级HTML元素和父级节点，用于遍历DOM树。 11. **pathname**、**port** 和 **protocol**：这些属性用于处理URL，分别获取...
例如，在上面的代码中，`top: expression(this.offsetParent.scrollTop)`和`left: expression(this.parentElement.offsetParent.scrollLeft)`就是利用`expression`表达式动态计算并设置元素的`top`和`left`值，确保...
OFFSETPARENT 属性用于获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 47. OFFSETTOP 属性 OFFSETTOP 属性用于获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 48. ...
1、js通过样式的方法、了解parentElement和offsetParent的原理，自己的布局不一样，css也就不一样，这种方法是浏览器可能会比较慢的哦！！ 2、2\3方法都是用jquery也有仿excel的方法，自己也可以去网上找一找
上面用到了parentNode，这里顺便说说它跟offsetParent，parentElement的区别。 先看看parentNode在w3c的说明： The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a ...
这里使用`left: expression(this.parentElement.offsetParent.parentElement.scrollLeft)`来使列与父元素的滚动条左边对齐。同样，`background-color`定义了背景颜色。 3. `.FixedColumnAndRows` 类结合了前两者的...
var parentElement = childElement.offsetParent; console.log(childElement.offsetLeft); // 子元素相对于最近的定位父元素的左侧距离 console.log(childElement.offsetTop); // 子元素相对于最近的定位父元素的...
33. parentElement/parentNode：获取Div元素的父级元素和节点。 34. parentTextEdit：在富文本编辑环境中，获取可以创建TextRange对象的父元素。 了解并熟练运用这些Div属性，可以帮助开发者创建功能丰富的动态...
本文主要探讨了在Internet Explorer（IE）和Firefox浏览器中事件对象`event`的区别。 首先，IE浏览器有一个全局的`window.event`对象，可以用来访问当前事件的信息。然而，Firefox并不支持这个全局变量。在Firefox...
最后，在操作DOM树时，IE使用`parentElement`和`parentElement.children`来获取父节点和子节点集合，删除节点用`element.removeNode(true)`；Firefox则使用`parentNode`和`parentNode.childNodes`，删除节点用`node....
14. **parentElement/parentNode**： - **定义**：分别返回当前元素的父元素或父节点。 - **应用场景**：在DOM遍历和操作中常用。 15. **pageBreakAfter/pageBreakBefore**： - **定义**：设置页面分隔符的类型...
38. offsetParent：获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。该属性控制 Select 元素的容器对象。 39. offsetTop：获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。该属性...
在这个例子中，我们需要这个节点的`offsetTop`值，它表示元素相对于其offsetParent的顶部的距离。 然而，有时候`commonAncestorContainer`可能是行内元素，这时它可能没有`offsetTop`属性。因此，我们需要找到它的...
兼容性问题常常是开发者面临的一大挑战，因为不同的浏览器（如IE和Firefox）对某些API的实现有所不同。本文将详细介绍如何在JavaScript中解决这个问题，以及在不同浏览器间实现兼容性。 首先，让我们明确一个基本...
- **说明**: 每个元素都可以有一个唯一的ID，用于通过CSS或JavaScript来选择和操作这个元素。 **22. innerText** - **功能**: 设置或获取位于对象起始和结束标签内的文本。 - **语法**: `innerText: [text]` - ...
3. offsetParent属性则可以获取当前节点的所有父节点，该属性通常用于获取元素的定位父元素，以便进行元素位置的计算。 最后，获取兄弟节点。通常我们通过获取父节点后再找到其他兄弟节点，常见的方法有： 1. 使用...