目录
前言
在制作动画的时候,我们常常需要用到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;
})
效果图如下:
结束语
希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我,后续也会持续发布新文章,祝大家学有所成!
欢迎各位前端大佬留言讨论指教! 小糖谢谢各位啦~❤ ❤ ❤ ❤