最近学习了一下JS中常用到的坐标系列 offset、scroll、client三大系列
offset()
offset(): 方法返回匹配元素相对于文档的偏移(位置)。 换个说法就是:匹配元素距离最近的 有定位的父级元素 的 偏移位置
offsetTop offsetLeft
对象距离左边的距离,距离顶部的距离的具体值。
offsetWidth offsetHeight
获取实际宽度 : width + 左右padding + 左右border
获取实际高度: height + 上下padding + 上下border
offsetParent
获取最近的 带有定位的父级元素
来看【实例】:
<style type="text/css">
.div01{
width: 500px;
height: 500px;
background: #FFF0F5;
padding: 30px;
}
.first{
width: 300px;
height: 300px;
background: #DB7093;
margin: 100px;
padding: 40px 0 0 0;
position: relative;
}
.second{
width: 200px;
height: 210px;
background: #8B008B;
padding: 10px;
margin: 0px 0 0 20px;