`
deng131
  • 浏览: 678452 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

parentElement和offsetParent之间区别

阅读更多
需要注意的是parentElement 属性是 IE 特有的,W3C 标准是使用 parentNode 属性,还有 children 和 childNodes, children 是 IE 特有的, childNodes 被其他浏览器支持。

parentElement属性,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。

offsetParent 属性,要先明白"已定位元素",给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。

在使用 offsetParent 属性获取父级对象时有以下两种情况:
1、元素本身已经定位
如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象
在使用 offsetParent 属性获取父级对象时有以下两种情况:
2、元素没有定位
如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 对象

参考:
http://www.phpzixue.cn/detail1047.shtml
http://www.cnblogs.com/onlyendure/archive/2008/08/11/1264878.html
分享到:
评论

相关推荐

    js parentElement和offsetParent之间的区别

    在JavaScript中,`parentElement`和`offsetParent`都是用于处理元素上下级关系的属性,但它们的作用和应用场景有所不同。本文将深入解析这两个属性的区别及其使用。 首先,`parentElement`属性是DOM层次结构的一...

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    用css样式固定表头和列

    left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); background-color: #E6ECF0; } ``` ### 实现细节 - **使用`expression`**: 虽然在现代前端开发中,直接使用`expression`并不被...

    仿excel、锁定表头和表列-3种方法

    1、js通过样式的方法、了解parentElement和offsetParent的原理,自己的布局不一样,css也就不一样,这种方法是浏览器可能会比较慢的哦!! 2、2\3方法都是用jquery也有仿excel的方法,自己也可以去网上找一找

    html固定表格头和列

    例如,在上面的代码中,`top: expression(this.offsetParent.scrollTop)`和`left: expression(this.parentElement.offsetParent.scrollLeft)`就是利用`expression`表达式动态计算并设置元素的`top`和`left`值,确保...

    DOM相关内容速查手册

    9. **padding**、**paddingBottom**、**paddingLeft**、**paddingRight** 和 **paddingTop**:这些属性控制元素内容与边框之间的空隙,是布局和样式设计的一部分。 10. **parentWindow**、**parentElement** 和 **...

    html学习心得,我感觉很好

    OFFSETPARENT 属性用于获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 47. OFFSETTOP 属性 OFFSETTOP 属性用于获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 48. ...

    固定表格行列(expression)在IE下适用

    这里使用`left: expression(this.parentElement.offsetParent.parentElement.scrollLeft)`来使列与父元素的滚动条左边对齐。同样,`background-color`定义了背景颜色。 3. `.FixedColumnAndRows` 类结合了前两者的...

    html中select的属性.pdf

    8. clientLeft:获取 offsetLeft 属性和客户区域的实际左边之间的距离。该属性控制 Select 元素的左边距。 9. clientTop:获取 offsetTop 属性和客户区域的实际顶端之间的距离。该属性控制 Select 元素的顶端距。 ...

    JavaScript Table行定位效果

    上面用到了parentNode,这里顺便说说它跟offsetParent,parentElement的区别。 先看看parentNode在w3c的说明: The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a ...

    Html页面的dom常见属性

    14. **parentElement/parentNode**: - **定义**:分别返回当前元素的父元素或父节点。 - **应用场景**:在DOM遍历和操作中常用。 15. **pageBreakAfter/pageBreakBefore**: - **定义**:设置页面分隔符的类型...

    JS中offset和匀速动画详解

    在JavaScript中,`offset`属性是用来获取或设置元素相对于其offsetParent元素的位置和尺寸的。offset家族包括`offsetWidth`、`offsetHeight`、`offsetLeft`和`offsetTop`,以及`offsetParent`,它们提供了对元素尺寸...

    Js Div属性大全

    33. parentElement/parentNode:获取Div元素的父级元素和节点。 34. parentTextEdit:在富文本编辑环境中,获取可以创建TextRange对象的父元素。 了解并熟练运用这些Div属性,可以帮助开发者创建功能丰富的动态...

    ie与firefox下的event使用说明与详细区别

    最后,在操作DOM树时,IE使用`parentElement`和`parentElement.children`来获取父节点和子节点集合,删除节点用`element.removeNode(true)`;Firefox则使用`parentNode`和`parentNode.childNodes`,删除节点用`node....

    比较全面的event对像在IE与FF中的区别 推荐

    本文主要探讨了在Internet Explorer(IE)和Firefox浏览器中事件对象`event`的区别。 首先,IE浏览器有一个全局的`window.event`对象,可以用来访问当前事件的信息。然而,Firefox并不支持这个全局变量。在Firefox...

    CSS_style属性大全

    - **说明**: 用于定义框架之间的边框宽度、样式和颜色。可以用于美化页面布局中的框架结构。 **7. canHaveChildren** - **功能**: 获取表明对象是否可以包含子对象的值。 - **语法**: `canHaveChildren: true | ...

    vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果

    在这个例子中,我们需要这个节点的`offsetTop`值,它表示元素相对于其offsetParent的顶部的距离。 然而,有时候`commonAncestorContainer`可能是行内元素,这时它可能没有`offsetTop`属性。因此,我们需要找到它的...

    javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

    兼容性问题常常是开发者面临的一大挑战,因为不同的浏览器(如IE和Firefox)对某些API的实现有所不同。本文将详细介绍如何在JavaScript中解决这个问题,以及在不同浏览器间实现兼容性。 首先,让我们明确一个基本...

    JS获取子节点、父节点和兄弟节点的方法实例总结

    3. offsetParent属性则可以获取当前节点的所有父节点,该属性通常用于获取元素的定位父元素,以便进行元素位置的计算。 最后,获取兄弟节点。通常我们通过获取父节点后再找到其他兄弟节点,常见的方法有: 1. 使用...

Global site tag (gtag.js) - Google Analytics