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