【亡羊补牢】JS灵魂之问第12期你知道offset家族吗？

引言

有几天没有更新JS灵魂之问的专栏系列文章了，秋招季，也在忙着备战笔试面试。今天得空再来写一篇文章，本篇要讲解的内容是关于 offset ，什么，你还不知道这玩意是什么？那今天这篇算是问倒你了，一起来探索一下吧。

仰望星空的人，不应该被嘲笑

探索知识

话不多说，先上一张图给大伙瞧瞧：

看完如何？瞬间懵逼有没有… 今天我们就只讲 offset ，图中还有家族中其它属性，后续文章会继续分析，大家不要着急哈。

关于 offset

通过阅读，可以看到，关于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>