JS之offset家族(元素尺寸)

我们知道红楼梦中 有四大家族
在JS当中也有几大家族 现在介绍一下offset家族

offset的作用

方便获取元素尺寸

offsetWidth offsetHeight

得到对象的宽度和高度(自己的，与他人无关)
offsetWidth: width + border + padding

div {
  width:220px;
  border-left:2px solid red;
  padding:10px;
}
div的.offsetWidth =  220 + 2(只有左边框) + 20

注意:为什么不用 div.style.width
因为它只能得到行内的数值

offsetLeft offsetTop

如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。

offsetLeft 从父级的padding 开始算 父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离

offsetParent

返回该对象的（带有定位）父级 不一定是亲的爸爸
它和 parentNode 这个返回亲父亲 不管父亲是否带有定位 有所区别

1. 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2. 如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent 取最近的那个父级元素。

offsetTop style.top 以及 offsetLeft和style.left 的区别

1. offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right

2. offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
   style.left = 300px parseInt（300px）
   结果 300
   parseInt（style.left） + parseInt（style.left）

3. offsetTop 只读，而 style.top 可读写。

4. 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

5. 最重要的区别 style.left 只能得到 行内样式 而offsetLeft 则都可以获取到