【JS与JQ】原生JS(clientTop/clientLeft,offsetTop/offsetLeft,scrollTop/scrollLeft)

JS和JQuery位置方法汇总

前言总结：

HTML：

<div class="gFather">
    <div class="father">
        <div class="child"> 
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            JS--JQ的距离/位置总结<br>
            </div>
        </div>
    </div>
        <button class="btn">获取</button>
        <button class="btn1">设置</button>

CSS：

*{
            margin: 0;
            padding: 0;
        }
        body{
            border: 20px solid #00ea00;
            margin: 10px 0 0 20px;
            padding: 10px 0 0 20px;
            height: 2000px;
            width: 2000px;
        }
        .gFather{
            position: relative;
            border: 20px solid red;
            width: 400px;
            height: 300px;
            left: 20px;
            background-color: darkorchid; 
        }
        .father{
            position: absolute;
            width: 300px;
            height: 200px;
            border: 20px solid #ee8096;
            background: skyblue;
            margin-left: 20px ;
            margin-top: 30px;
        }
        .child{
            position: absolute;
            overflow: auto;
            white-space: nowrap;
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 20px;
            top: 20px;
            left: 10px;
            border: 10px solid #000;
            background-color: rgb(133, 163, 87);
        }
        button{
            position: fixed;
            bottom: 20px;
        }
        .btn{
            right: 80px;
        }
        .btn1{
            right: 40px;
        }

JS位置方法总结：

1. clientTop||clientLeft（当前元素padding内边距到当前元素的border的距离，也就是当前元素border的宽度/高度）；
2. offsetTop||offsetLeft（当前元素到其直接/非直接父级元素（如果没有那就body）的外边距距离 || 具体说就是当前元素的border最外层到其父级border的最内层,注意父级是body的,都是距离绝对窗口的最边缘,也就是说跟scroll滚动的位置无关）；
3. scrollTop||scrollLeft（当前元素中的内容超出其宽高的时候，元素被卷起的高度和宽度值）；

JS对应的代码：

window.onload = function(){
/* JS-[距离]方法 clientTop/clientLeft || offsetTop/offsetLeft || scrollTop/scrollLeft */
    var $gFather = document.getElementsByClassName("gFather")[0];
    var $father = document.getElementsByClassName("father")[0];
    var $child = document.getElementsByClassName("child")[0];
    var btn = document.getElementsByTagName("button")[0];
    var btn1 = document.getElementsByTagName("button")[1];

    btn.onclick = function(){
    // 1.clientTop||clientLeft（当前元素padding内边距到当前元素的border的距离，也就是当前元素border的宽度/高度）
        console.log("JS--gFather--clientTop",$gFather.clientTop); // 20 || 20
        console.log("JS--father--clientTop",$father.clientTop); // 20 || 40
        console.log("JS--father--clientLeft",$father.clientLeft); // 20 || 40
        console.log("JS--child--clientTop",$child.clientTop); // 10 || 10
        console.log("JS--child--clientLeft",$child.clientLeft); // 10 || 10

    // 2.offsetTop||offsetLeft（当前元素到其直接/非直接父级元素（如果没有那就body）的外边距距离 || 具体说就是当前元素的border最外层到其父级border的最内层,
    // 注意父级是body的,都是距离绝对窗口的最边缘,也就是说跟scroll滚动的位置无关）
        console.log("JS--gFather--offsetTop",$gFather.offsetTop); // 40 || 40
        console.log("JS--gFather--offsetLeft",$gFather.offsetLeft); // 80 || 80
        console.log("JS--father--offsetTop",$father.offsetTop); // 30 || 45
        console.log("JS--father--offsetLeft",$father.offsetLeft); // 20 || 35
        console.log("JS--child--offsetTop",$child.offsetTop); // 40 || 25
        console.log("JS--child--offsetLeft",$child.offsetLeft); // 30 || 30

    // 3.scrollTop||scrollLeft（当前元素中的内容超出其宽高的时候，元素被卷起的高度和宽度值）
        console.log("JS--child--scrollTop",$child.scrollTop);
        console.log("JS--child--scrollLeft",$child.scrollLeft);
    }
    // 3.1监听scrollTop||scrollLeft（动态输出当前属性的滚动距离）
    $child.onscroll = function(){
        console.log("JS--child--scrollTop:" + this.scrollTop); // 0-190
        console.log("JS--child--scrollLeft:" + this.scrollLeft); // 0-85 || 0-5
    }
    btn1.onclick = function(){
        console.log("-------------------设置距离--------------------")
        $gFather.style.padding = "15px";
        $father.style.border = "40px solid #ee8096";
        $child.style.top = "5px";
        $child.style.width = "180px";
    }
}

---

JQuery位置方法总结：

1. offset().left/offset().top（与父子级无关,此时的offset都是相对于当前绝对窗口的定位 || 同样和scroll值所在的位置无关）；
2. position().left/position().top（与父子级有关,此时的position是相对于当前元素样式中的top/left的值,对于margin/padding不能进行识别,所以如果元素的自身没有这两个值,则获取为0 || 注意这个position只能读取,并且无关父级是body时此时padding/margin/top/left都算进去）；
3. scrollTop()/scrollLeft()（可以获取当前页面滚动的距离,也可以设置当前跳转的距离）；

JQuery对应的代码：

<script src="../jquery-1.12.2.js"></script>
$(function(){
$("button").eq(0).click(function(){
      // 1.offset().left/offset().top（与父子级无关,此时的offset都是相对于当前绝对窗口的定位 || 同样和scroll值所在的位置无关）
      console.log("JQ--gFather--offset().top",$(".gFather").offset().top);  // 40 || 45
      console.log("JQ--gFather--offset().left",$(".gFather").offset().left); // 80 || 85
      console.log("JQ--father--offset().top",$(".father").offset().top); // 0 || 80
      console.log("JQ--father--offset().left",$(".father").offset().left); // 0 || 125
      console.log("JQ--child--offset().top",$(".child").offset().top); // 20 || 150
      console.log("JQ--child--offset().left",$(".child").offset().left); // 10 || 10

      // 2.position().left/position().top（与父子级有关,此时的position是相对于当前元素样式中的top/left的值,对于margin/padding不能进行识别,
      // 所以如果元素的自身没有这两个值,则获取为0 || 注意这个position只能读取,并且无关父级是body时此时padding/margin/top/left都算进去）
      console.log("JQ--gFather--position().top",$(".gFather").position().top);  // 40 || 45
      console.log("JQ--gFather--position().left",$(".gFather").position().left); // 80 || 85
      console.log("JQ--father--position().top",$(".father").position().top); // 30 || -15
      console.log("JQ--father--position().left",$(".father").position().left); // 20 || 0
      console.log("JQ--child--position().top",$(".child").position().top); // 40 || 30
      console.log("JQ--child--position().left",$(".child").position().left); // 30 || -155

      // 3.scrollTop()/scrollLeft()（可以获取当前页面滚动的距离,也可以设置当前跳转的距离）
      console.log("JQ--child--scrollTop()",$(".child").scrollTop());
      console.log("JQ--child--scrollLeft()",$(".child").scrollLeft());
      console.log("JQ--body(IE)/html--scrollTop()",$("html,body").scrollTop());
      console.log("JQ--body(IE)/html--scrollLeft()",$("html,body").scrollLeft());
  })

  // 3.1监听scrollTop()/scrollLeft()的值（动态输出当前属性的滚动距离）
  $(".child").scroll(function(){
      console.log("当前滚动的scrollTop:" + $(".child").scrollTop());
      console.log("当前滚动的scrollLeft:" + $(".child").scrollLeft())
  })

  $("button").eq(1).click(function(){
      console.log("-----------------设置距离-------------------")
      // 1.offset().top/offset().left可以直接修改元素的值,注意写法参数不是string
      $("body").eq(0).css({border:"25px solid #00ea00"});
      $(".father").offset({
          top:80
      });
      $(".child").offset({
          top: 150,
          left: 10
      })

      // 2.position().top/position().left不可以设置元素的值,只能读取
      // $(".father").position({
      //     top:10
      // })

      // 3.scrollTop()/scrollLeft()可以设置值
      $(".child").scrollTop(50);
      $(".child").scrollLeft(20);

      $("body,html").scrollTop(0);
      $("body,html").scrollLeft(0);
  })
})