OffSet家族1-offsetParent

说到offset家族，我们分为三个点来分析：

offsetParent
offsetTop、offsetLeft
offsetWidth、offsetHeight
下面我们逐条分析：

offsetParent

首先我们先看一下官方的定义：

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null；
看完概念是不是有点懵，我们一步一步来分析

当元素本身没有定位时

父元素和祖先元素都没有定位时

当上一级或者最近的祖先是td,th时，el.offsetParent返回td,th
当上一级或者最近的祖先是table时，el.offsetParent返回table
当上一级或者最近的祖先没有定位，不是 table,td,th时，el.offsetParent返回body

<body><div class="father"><div class="son"></div></div><table><thead class="thead"><tr class="trone"><th class="th"><span class="span"></span></th></tr></thead><tbody><tr class="trtwo"><td class="td"><a href="#" class="a">学废了</a></td></tr></tbody></table><script>console.log(document.querySelector(".span").offsetParent);//thconsole.log(document.querySelector(".th").offsetParent);//tableconsole.log(document.querySelector(".trone").offsetParent);//tableconsole.log(document.querySelector(".thead").offsetParent);//tableconsole.log(document.querySelector(".a").offsetParent);//tdconsole.log(document.querySelector(".td").offsetParent);//tableconsole.log(document.querySelector(".trtwo").offsetParent);//tableconsole.log(document.querySelector(".son").offsetParent);//bodyconsole.log(document.querySelector(".father").offsetParent);//body</script>

看一下打印结果

和上面猜测一样，接下来让我们看一下自身有定位的情况

当元素本身没有定位时，父元素或祖先元素有定位

这里我们先看案例

<body><div class="grandpa" style="position: relative;"><div class="father" style="position: absolute;"><div class="son"></div></div></div><div class="grandma" style="position: absolute;"><div class="mama"><div class="sister"></div></div></div><div class="big" style="position: static;"><div class="small"></div></div><div class="more" style="position: fixed;"><div class="lit"></div></div><script>console.log(document.querySelector(".son").offsetParent); //fatherconsole.log(document.querySelector(".father").offsetParent); //grandpaconsole.log(document.querySelector(".sister").offsetParent); //grandmaconsole.log(document.querySelector(".small").offsetParent); //bodyconsole.log(document.querySelector(".lit").offsetParent); //more</script>
</body>

我们会发现只要在父元素有定位的时候，他会找最近的有定位的父元素的dom元素
但是要注意的是，static除外，向我们上面small的父元素虽然有定位，但是由于定位元素为staic，所以还是指向了body
还需要注意的是：当是table表格的时候有一点不一样，看下面

<table style="position: fixed;"><thead class="thead" style="position: fixed;"><tr class="trone"><th class="th"><span class="span"></span></th></tr></thead></table>console.log(document.querySelector(".span").offsetParent); //thconsole.log(document.querySelector(".trone").offsetParent); //thead

这两个输出结果一个为th，一个为thead；

注意

我们会发现上面span最近的有非static的定位元素为thead ，但是还是输出了th
但是我们发现trone找到了最近的有非static的定位元素thead
当为table时要格外注意，多打印确认结果

当元素本身有定位时

父元素或祖先元素没有定位或者为static时（非table）找到body（不为fixed的时候）

当为table元素的时候需要格外注意
这个时候直接找到body

父元素或祖先元素有非static定位时找最近的有定位的父元素的dom元素（不为fixed的时候）

当元素本身有定位时且为fixed的时候offsetParent为null

  <div class="big" style="position: absolute;"><div class="small" style="position: absolute;"></div></div><div class="more" style="position: fixed;"><div class="lit" style="position: static;"></div></div><div class="mama"><div class="sister" style="position: absolute;"></div></div><div class="father" style="position: absolute;"><div class="son" style="position: fixed;"></div></div>console.log(document.querySelector(".sister").offsetParent); //bodyconsole.log(document.querySelector(".small").offsetParent); //bigconsole.log(document.querySelector(".lit").offsetParent); //moreconsole.log(document.querySelector(".son").offsetParent);//null

特殊情况body的offsetParent为null

总结

本篇文章介绍了offsetParent，后续将继续对 offsetTop、offsetLeft
， offsetWidth、offsetHeight做出详细介绍，如果有问题可以在下面评论

OffSet家族1-offsetParent相关推荐

offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop
01-offset家族.真实宽高:offsetWidth,offsetHeight.-真实偏移:margin和定位的偏移组合:offsetLeft和offsetTop <style>.bo ...
js 三大家族（offset/scroll/client）
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
原生JS中的三大家族（offset/scroll/client）与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
三大家族scroll、offset、client
三大家族scroll.offset.client JS的三大家族主要是Offset.Scroll.Client,通过对三大家族不同属性的灵活使用,我们可以模拟出很多炫酷的JS动画,增强界面的视觉感染力 ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
Javascript使用三大家族和事件来DIY动画效果相关笔记（一）
1.offset家族 ◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括四周的边框.四周的padding.及定义的宽度高度或内容撑开的高度和宽度,可以用来检 ...
JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介我们知道,三大家族包括:offset/scroll/c ...
javaScript中三大家族总结
三大家族整体解释图第一大家族:offset家族 offset 是自己的-- 目的: 方便的获取元素尺寸 offsetWidth offsetHeight 得到对象的宽度和高度(自己的,与他人无关) ...