js 三大家族之offset

js中的offset家族：

一、offsetwidth与offsetheight：

获取的是元素的实际宽高 = width + border + padding

    注意点： 
        1.可以获取行内及内嵌的宽高
        2.获取到的值是一个number类型，不带单位
        3.获取的宽高包含border和padding
        4.只能读取，不能设置

console.log ( div.offsetwidth );//width + border + padding
console.log (div.offsetheight );//height + border + padding

　　

 

二：offsetleft与offsettop:

    offsetleft:获取自己左外边框与父级元素的左内边框的距离
    offsettop:获取自己上外边框与父级元素的上内边框的距离

　　offsettop   和　style.top 的区别

    　　１．最大区别在于  offsetleft  可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以  只有定位的盒子 才有 left  top right
    　　２．offsettop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
    　　３．offsettop 只读，而 style.top 可读写。
    　　４．如果没有给 html 元素指定过 top 样式，则 style.top 返回的是空字符串。
    　　５．最重要的区别  style.left 只能得到 行内样式     offsetleft 随便

三：offsetparent:获取最近的定位父元素 （自己定位参照的父元素）
  注意点：
          1.如果元素自身是固定定位（fixed），则定位父级是null
          2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
          3.body的定位父级是null

offsetparent 和 parentnode的区别：
          如果当前元素的父级元素没有进行css定位（position为absolute或relative），offsetparent为body。
          如果当前元素的父级元素中有css定位（position为absolute或relative），offsetparent取最近的那个父级元素。