offsetParent

最新推荐文章于 2024-04-28 08:32:47 发布

杨过悔

最新推荐文章于 2024-04-28 08:32:47 发布

阅读量468

点赞数 1

分类专栏： html编程笔记文章标签： web 文档

html编程笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 
parentElement 属性来获取元素A。 
这里主要说的是 offsetParent 属性，这个属性在 MSDN 
的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。 

要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 
position 样式属性的值等于 absolute、relative、fixed 之一的元素。 
在使用 offsetParent 
属性获取父级对象时有以下两种情况： 
    1、元素本身已经定位 
        如果元素本身已经定位，那么 offsetParent 
属性返回此元素已定位父级元素，如没有已定位的父级元素，则返回 BODY 对象，例如： 

复制代码 
代码如下:

<body> 
<p> 
<div> 

<span id="obj1" style="position:absolute"></span> 

</div> 
<div id="pObj1" style="position:absolute"> 

<span id="obj2" style="position:absolute"></span> 

</div> 
</p> 
</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 
对象 
在 DOM 元素的属性里，还有 parentNode 这个属性，其实这个属性跟 parentElement 
属性是一个意思，parentElement 属性是 IE 特有的，W3C 标准是使用 parentNode 属性，还有 children 和 
childNodes, children 是 IE 特有的， childNodes 被其他浏览支持。

杨过悔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offsetParent

首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。这里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总
复制链接

扫一扫