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取最近的那個父級元素。