理解offsetparent

最新推荐文章于 2024-04-28 08:32:47 发布
最新推荐文章于 2024-04-28 08:32:47 发布
阅读量732 收藏
点赞数
分类专栏： html 文章标签： css

offsetParent:是指元素最近的定位（relative,absolute）祖先元素，如果没有祖先元素是定位的话，会指向body元素

　　　　　　　作用：元素的偏移量（offsetLeft,offsetTop）就是以这个祖先元素为参考点的

1.在DOM结构中该元素的上面没有定位元素：

<body>

<div>

　　<div id="aa">aa</div>

</div>

</body>

var aa = document.getElementBYId("aa").

aa.offsetParent.tagName  = BODY

如果aa的父元素加了个margin-left的话，在IE6中aa的offsetLeft=0，其它浏览器是margin-left值(IE6为啥呢。。。)

2.aa的父元素有定位样式

aa.offsetParent.tagName  = DIV

aa.offsetLeft = 0（没给aa加偏移）

3.aa的父父元素有定位样式，aa的父元素没有定位样式，参考物就是aa的父父元素

td的offsetParent是TABLE,不管table是否有定属性

td里面的元素的offsetParent为第一个定位的parents元素，如果没有定位元素呢，分为三种

1.如果该元素没有定位时:TD

2.如果该元素有定位，table都没有定位的话，IE6中＝HTML,FF,IE8=BODY

3.如果该元素和table都定位的话：TABLE



 以下是我个人总结的规律 
 
 在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> 


补充一些如果table外层还有一层div，如果属性有overflow:auto,则div默认是定位的,如果td中的元素是定位的 ，那么td.offsetParent.tagName是div

kevinlifeng
关注
专栏目录
JS OffsetParent属性深入解析
12-09
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 “none”时（译注：IE和Opera除外），offsetParent属性 返回 null。 句法：parentObj = element.offsetParent 变量：· parentObj 是一个元素的引用，当前元素的偏移
js中offsetParent详解
热门推荐
QMM的专栏
06-03 2万+
1. offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute  relative fixed），如果其父元素中不存在定位则offsetParent为：body元     素 2. 根据定义分别存在以下几种情况 【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefo
一文带你彻底了解offsetTop＆offsetParent
最新发布
qq_42816270的博客
04-28 938
offsetTop为只读属性，它返回当前元素相对于其元素的顶部内边距的距离。上面提到的内边距，即不包括元素边框的长度。我们再来看下是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
sinat_41212418的博客
11-01 6546
偏移量（offset dimension） 偏移量：包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度，宽度决定，包括所有内边距，滚动条和边框大小（注意，不包括外边距）。 以下4个属性可以获取元素的偏移量 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（可见的），水平滚动条的高度，上边框高度和下边框高度。 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（可见的），垂直滚动条的宽度，左边框宽度和右边框宽度。 3: off
offsetParent
qq_45768871的博客
04-30 1309
offsetParent HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相...
js parentElement和offsetParent之间的区别
10-29
里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。
offsetparent计算
02-02
理解这些规则有助于开发者更好地控制页面布局，特别是在处理动态定位和响应式设计时。此外，需要注意不同浏览器对 `offsetParent` 的实现可能略有差异，因此在开发过程中进行跨浏览器测试是非常重要的。
Javascript拖拽系列文章1之offsetParent属性第1/3页
10-30
JavaScript 拖拽功能是...记得在实践中不断尝试和优化，理解各种浏览器之间的差异，以确保你的拖拽功能在不同环境下都能正常工作。下一篇文章可能会涵盖更多的拖拽相关知识，如鼠标事件处理、坐标计算等，敬请期待。
对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解
08-08
### 对offsetLeft,offsetTop,scrollLeft,scrollTop几个方法的理解 在前端开发中，了解DOM元素的位置、大小以及滚动情况是非常重要的。`offsetLeft`, `offsetTop`, `scrollLeft`, `scrollTop`等属性可以帮助我们更好...
offsettop及相关属性介绍
XYLHxylh的博客
03-19 2232
offsetParent定位父级 偏移量属性一般就是offsetLeft、offsetTop、offsetHeight、offsetWidth这四种了，然后还有一个offsetParent属性作为偏移的参照点。在网上看到的offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素（感觉和绝对定位的定位点很类似？）。然后具体情况分为下面几种： ...
无涯教程-jQuery - offsetParent( )方法函数
无涯教程
02-24 1060
OffsetParent()方法返回具有第一个匹配元素的定位父元素的jQuery集合。这是具有位置的元素的第一个父元素(如相对或绝对)。此方法仅适用于可见元素。
无意中看到offsetParent，顺便就搜了下使用方法
digilover的专栏
02-18 210
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过 CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 ”none”时（译注：IE...
offsetTop、offsetParent、scrollTop以及vue如何实现左右联动效果
qq_43631129的博客
01-07 1357
offsetTop、offsetParent、scrollTop以及vue如何实现左右联动效果
三大家族scroll、offset、client
梅花寺
03-08 696
三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。
javascript 的 offsetParent用法
weixin_30872499的博客
01-18 114
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body> <div style="width:100px; height: 100px; positio...
JavaScript，clientWidth，clientHeight，offsetHeight，offsetWeight，offsetParent，offsetLeft，offsetTop等用法
weixin_43228946的博客
08-19 419
clientWidth:返回元素的可见宽度。 clientHeight:返回元素的可见高度。 这两个属性都是不带px,返回的是一个数字，可直接进行计算会获取元素宽度和高度，包括内容区和内边距. offsetHeight：返回元素的高度。 offsetWidth：返回元素的宽度。 获取元素的整个的高度和宽度，包括内容区、内边距和边框 offsetParent：可以获取当前元素的定位父元素，会获取当前元素最近的开启了定位的父元素。如果所有的祖先元素都没有开启定位则返回body offsetLeft：返回元素的水
深入理解JavaScript空间坐标及其应用实例
对于有定位属性的元素，其`offsetParent` 可能是拥有定位属性的父元素或`<body>`、`<td>`、`<th>`、`<table>`等。 理解和掌握JavaScript空间坐标，尤其是视口坐标，能够提升网页的性能和用户体验，是前端开发人员...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值