offset获取元素偏移，大小

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。

●获得元素距离带有定位父元素的位置

●获得元素自身的大小(宽度高度)

●注意:返回的数值都不带单位

 

    <style>
      .father {
        width: 500px;
        height: 500px;
        background-color: aqua;
        position: absolute;
        left: 220px;
        top: 220px;
      }
      .son {
        width: 150px;
        height: 150px;
        background-color: blueviolet;
        position: absolute;
        left: 200px;
        top: 150px;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
  <script>
    // offset 系列
    var father = document.querySelector(".father");
    var son = document.querySelector(".son");
    // 可以得到元素的偏移   位置  返回的不带单位的数值
    console.log(father.offsetTop);
    console.log(father.offsetLeft);
    console.log(son.offsetLeft);
    // 可以获得元素的宽高
    console.log(son.offsetWidth);
    console.log(son.offsetHeight);
    // 返回带有定位的父亲  否则返回的是body
    console.log(son.offsetParent);
    console.log(son.offsetNode); //返回父亲最近一级的父亲  亲爸爸  不管父亲有没有定位
  </script>

 

posted @ 2022-04-18 13:41  罗砂  阅读(63)  评论(0)    收藏  举报