前言

在制作动画的时候，我们常常需要用到offsetLeft属性来得到盒子的左偏移量，那它具体的原理是什么呢？今天我们就来学习学习！

一、offsetLeft与offsetTop属性

1、offsetLeft的定义和用法

offsetLeft 是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。

返回值包含:

该元素向左偏移的像素值，元素的外边距（margin）

offsetParent 元素的左侧内边距（padding）及滚动条

注意: offsetParent 元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素。/p>

通俗理解就是：假如一个元素是一个盒子，那么该属性返回的是盒子相对于他的父元素左边框的距离，这个距离包含盒子本身外边距，本身偏移量，再加上它父亲的左侧内边距(padding-left)

当然，如果这个元素没有父元素，那么他的父元素也可以是浏览器~

如果想获取元素顶部的偏移量，我们可以使用 offsetTop 属性。

2、offsetTop的定义和用法

offsetTop?也是一个只读属性，返回当前元素相对于 offsetParent 节点上边界的偏移像素值。

同样，该元素值返回值包含:

该元素向左偏移的像素值，元素的外边距（margin）

offsetParent 元素的左侧内边距（padding）及滚动条

通俗理解就是：元素还是一个盒子，那么该属性返回的是盒子相对于他的父元素上边框的距离，
这个距离包含盒子本身外边距，本身偏移量，再加上它父亲的上侧内边距(padding-top)

当然，如果这个元素没有父元素，那么他的父元素也可以是浏览器~

基于这两个知识，小糖举个栗子~

下面这个盒子已优先取消了它父级的内边距~

.box {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            position: relative;
            marin: 100px auto;
        }
        #test {
            margin-left: 0;
            left: 100px;
            margin-top: 100px;
            padding: 10px;
            width: 300px;
            position: absolute;
            border: 5px solid black
            }

<div class="box">
        <div id="test">
            <p>点击按钮获取 div 元素的左侧偏移量:</p>
            <p><button >点击</button></p>
            <p>offsetLeft 为: <span id="demo"></span></p>
            <p>offsetTop 为: <span id="demo1"></span></p>
          </div>
    </div>

 var Div = document.getElementById("test");
        Div.addEventListener('click',function () {
            document.getElementById("demo").innerHTML = Div.offsetLeft;
            document.getElementById("demo1").innerHTML = Div.offsetTop;
        })

效果图如下：