【亡羊補牢】JS靈魂之問第12期你知道offset家族嗎？-有解無憂

引言

有幾天沒有更新JS靈魂之問的專欄系列文章了，秋招季，也在忙著備戰筆試面試，今天得空再來寫一篇文章，本篇要講解的內容是關于 offset ，什么，你還不知道這玩意是什么？那今天這篇算是問倒你了，一起來探索一下吧，

仰望星空的人，不應該被嘲笑

探索知識

話不多說，先上一張圖給大伙瞧瞧：

看完如何？瞬間懵逼有沒有… 今天我們就只講 offset ，圖中還有家族中其它屬性，后續文章會繼續分析，大家不要著急哈，

關于 offset

w3中offset相關頁面是：http://www.w3.org/TR/cssom-view/#extensions-to-the-htmlelement-interface

通過閱讀，可以看到，關于offset共有5個東西需要弄清楚：

offsetParent
offsetTop
offsetLeft
offsetWidth
offsetHeight

學習 offsetParent

offsetParent 正如字面意思看的話，我們猜想它會找父容器，確實如此，不過 offsetParent 會有一個條件，就是父容器要進行定位，比如下面這個例子，我們獲取紅色盒子的 offsetParent ，如果黃色盒子進行了定位操作，那么 offsetParent的結果就是它，如果沒有進行定位操作，那么會向上找，一直找直到找到 body，

好的，你明白了會往父級去找，那么給你如下代碼，你看看會輸出什么呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>學習offsetParent</title>
    <style>

    </style>
  </head>
  <body>
  <div id="con" style="position: fixed"></div>
  <script>
    let oDiv = document.getElementById('con')
    console.log(oDiv.offsetParent)
  </script>
</body>
</html>

查看控制臺，我們發現會輸出 null，這是為什么呢？

這就是第一個特性了，如果元素自身有 fixed 定位，offsetParent 會是 null，

那么，我們把上述代碼 fixed 定位，去掉呢？試一試，看看結果會是什么：

顯然，會輸出 body，

上面這個你會了，下面這段代碼應該很好理解了，按照它的特性來就是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>學習offsetParent</title>
    <style></style>
  </head>
  <body>
    <div id="father" style="position: relative;">
      <div id="con"></div>
    </div>
    <script>
      let oDiv = document.getElementById('con')
      console.log(oDiv.offsetParent)
    </script>
  </body>
</html>

顯然，會輸出 father 對應的盒子，

最后，還有一個特性，這個容易疏忽，就是 body 的 offsetParent 的值為 null，小伙伴們可以去試著列印一下，本篇就不再碼上代碼了，

學習 offsetLeft / offsetTop / offsetHeight / offsetWeight

本篇已經學習完了 offsetParent，接下來預留要學的就是上述標題了，為了讓自己不偷懶，一直鴿著，先把關鍵代碼和效果圖奉上，小伙伴們可以跑一下，查看一下結果，或許就已經明白了，具體詳細內容我們下次再來探索吧~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>offset家族</title>
    <style>
      body {
        border: 20px solid #ccc;
        margin: 10px;
        padding: 40px;
        background: #eee;
      }
      #con {
        width: 400px;
        height: 200px;
        padding: 20px;
        background: #f60;
        border: 5px solid #888;
      }
    </style>
  </head>
  <body>
    <!-- offset 偏移量 
    1.定位父級 offsetParent
    2.offsetLeft offsetTop
    3.offsetHeight offsetWeight
  -->
  <div id="con"></div>
  <script>
    let oDiv = document.getElementById('con')
    oDiv.innerHTML ="<p>offsetLeft:"+oDiv.offsetLeft+"</p>"+
                    "<p>offsetTop:"+oDiv.offsetTop+"</p>"+
                    "<p>offsetWidth:" + oDiv.offsetWidth + "</p>" +
                    "<p>offsetHeight:"+oDiv.offsetHeight+"</p>"
  </script>
</body>
</html>