offset系列client系列scroll系列

Posted houfee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了offset系列client系列scroll系列相关的知识,希望对你有一定的参考价值。

 

offset系列、client系列

  <style>
    .testDOM {
      width: 200px;
      height: 200px;
      background-color: #2de;
      padding: 20px;
      border: 10px solid #ec6;
      margin: 20px;
    }
  </style>
  <!-- margin: 20px; padding: 20px; border: 10px; 200px * 200px => 260px * 260px-->
  <div class="testDOM"></div>

 

 

    let test = document.querySelector(‘.testDOM‘)
    console.log(test.offsetWidth) // width + padding(左右) + border(左右)260
    console.log(test.offsetHeight)  //  height + padding(上下) + border(上下)260
    // 获取元素的坐标,相对于其最近的定位的上级元素的坐标。否则,相对于body。
    console.log(test.offsetLeft) // 28 body有8px的padding
    console.log(test.offsetTop) // 20 
    // 获取元素的最近的定位的上级元素 没有最近的定位的上级元素,所以获取body
    console.log(test.offsetParent) // <body>
    console.log(test.clientWidth) // width + padding(左右) 240
    console.log(test.clientHeight) // height + padding(上下) 240
    // 获取元素的坐标,获取当前节点对象的padding的外边界,距离border外边界的距离。实际上就是左边框的厚度。
    console.log(test.offsetLeft) // 28
    console.log(test.offsetTop) // 20
    // 获取当前节点对象的宽度和高度,返回数字,不包含单位。
    console.log(test.scrollWidth) // width+padding(左右)+ 溢出部分 240
    console.log(test.scrollHeight) // height+padding(上下)+ 溢出部分 240

 

 

技术分享图片

 

scroll系列

  <style>
    * {
      margin:0;
      padding:0;
    }
    .father {
      width:300px;
      height: 300px;
      background-color: #3de;
      margin:100px auto;
      padding: 10px;
      overflow: auto;
      border:10px solid red;
    }
    .son {
      width: 400px;
      height: 600px;
      background-color: yellowgreen;
    }
  </style>

  <div class="father">
    <div class="son">

    </div>
  </div>
    var fNode = document.querySelector(‘.father‘);
    fNode.onscroll = function(){
       // 获取元素中被卷去的内容的距离 获取元素内部总被卷去的内容的横向距离  和  纵向距离
      console.log(‘x:‘ + fNode.scrollLeft);
      console.log(‘y:‘ + fNode.scrollTop);
    }

技术分享图片

 

以上是关于offset系列client系列scroll系列的主要内容,如果未能解决你的问题,请参考以下文章

client,offset.scroll系列/案例

元素的client offset scroll三个系列

offset client scroll 三大系列

js 元素offset,client , scroll 三大系列总结

offset,scroll,client三大系列

07-BOM client offset scroll 的系列