javascrip中parentNode和offsetParent之间的区别
2015-07-26 18:41
567 查看
首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。
要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 属性获取父级对象时有以下两种情况:
1、元素本身已经定位
如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象,例如:
obj1.offsetParent 返回 BODY 对象
obj2.offsetParent 返回 pObj1 对象
2、元素没有定位
如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 对象,例如:
obj1.offsetParent 返回 td1 对象
obj2.offsetParent 返回 pObj2 对象
原文参见:js parentElement和offsetParent之间的区别
要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent 属性获取父级对象时有以下两种情况:
1、元素本身已经定位
如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象,例如:
<body> <div> <span id="obj1" style="position:absolute"></span> </div> <div id="pObj1" style="position:absolute"> <span id="obj2" style="position:absolute"></span> </div> </body>
obj1.offsetParent 返回 BODY 对象
obj2.offsetParent 返回 pObj1 对象
2、元素没有定位
如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 对象,例如:
<table width="500" border="0"> <tr> <td id="td1"> <div id="pObj1"> <span id="obj1"></span> </div> </td> </tr> <tr> <td> <div id="pObj2" style="position:relative"> <span id="obj2"></span> </div> </td> </tr> </table>
obj1.offsetParent 返回 td1 对象
obj2.offsetParent 返回 pObj2 对象
原文参见:js parentElement和offsetParent之间的区别
相关文章推荐
- 【Leetcode】Delete Node in a LinkedList
- [Leetcode 25] Reverse Nodes in k-Group
- leetcode[117]:Populating Next Right Pointers in Each Node II
- windows下关于nodejs和npm的安装、方法,网址
- 理解inode
- leetcode[116]:Populating Next Right Pointers in Each Node
- 我的第一个Node web程序
- Node.js模板引擎学习----ejs
- Hadoop学习笔记(老版本,YARN之前),MapReduce任务Namenode DataNode Jobtracker Tasktracker之间的关系
- Leetcode 19 Remove Nth Node From End of List
- Nodejs总结
- Nodejs进程管理模块forever详解
- leetcode - Swap Nodes in Pairs
- 237、Delete Node in a Linked List [Leetcode]
- 深入浅出NodeJS笔记(三)
- nodejs、npm、express安装
- nodejs async 库使用
- NodeJS+Express开发web,为什么中文显示为乱码
- Delete Node in a Linked List
- [Leetcode] Populating Next Right Pointers in Each Node