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 则都可以获取到