三大家族和一个事件对象

x###1. 三大家族(offset/scroll/client)
事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制)

2. Offset家族简介

offset这个单词本身是--偏移,补偿,位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族;
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。

2.1 offsetWidth和offsetHight (检测盒子自身宽高+padding+border)

这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。

offsetWidth =width+padding+border;
offsetHeight= Height+padding+border;```

####2.2    offsetLeft和offsetTop  (检测距离父盒子有定位的左/上面的距离)
返回距离上级盒子(带有定位)左边的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
####2.3  offsetParent   (检测父系盒子中带有定位的父盒子节点)
1、返回改对象的父级 (带有定位)
 如果当前元素的父级元素没有进行CSS定位     (position为absolute或                 relative,fixed),   offsetParent为body。
2、如果当前元素的父级元素中有CSS定位           (position为absolute或                       relative,fixed),   offsetParent取最近的那个父级元素。

###3.  offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以
二、offsetTop 返回的是数字,而style.top 返回的是字符串,除了数字外还带有单位:px。
三、offsetTop 只读,而style.top 可读写。(只读是获取值,可写是赋值)
四、如果没有给HTML 元素指定过 top 样式,则style.top 返回的是空字符串。

推荐阅读更多精彩内容