js-DOM offsetLeft 属性与 offsetTop 属性，制作网页动画等必学知识！

目录

前言

一、offsetLeft与offsetTop属性

1、offsetLeft的定义和用法

2、offsetTop的定义和用法

结束语

---

前言

在制作动画的时候，我们常常需要用到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;
        })    

效果图如下：

 

 

结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤