js中offset系列_汪刚_20230519

• 
  
  
  • 今日学习内容：
    
  • 三大家族（offset/scroll/client）
    事件对象/event   （事件被触动时，鼠标和键盘的状态）（通过属性控制）
    1.2 Offset家族简介
        offset这个单词本身是--偏移，补偿，位移的意思。
        js中有一套方便的获取元素尺寸的办法就是offset家族；
        offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
       共同组成了offset家族。
    1.2.1 offsetWidth和offsetHight （检测盒子自身宽高+padding+border）
        这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
        offset宽/高  =  盒子自身的宽/高 + padding +border；
        offsetWidth = width+padding+border；
        offsetHeight = Height+padding+border；
    1.2.2 offsetLeft和offsetTop  （检测距离父盒子有定位的左/上面的距离）
        返回距离上级盒子（带有定位）左边s的位置
        如果父级都没有定位则以body为准
        offsetLeft 从父亲的padding 开始算,父亲的border 不算。
        在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
    1.2.3 offsetParent   （检测父系盒子中带有定位的**父盒子节点）
        1、返回改对象的父级 （带有定位）
  •          如果当前元素的父级元素没有进行CSS定位        （position为absolute或                        relative，fixed），        offsetParent为body。
        2、如果当前元素的父级元素中有CSS定位                （position为absolute或                                relative，fixed），        offsetParent取最近的那个父级元素。