offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

●获得元素距离带有定位父元素的位置

●获得元素自身的大小(宽度高度)

●注意:返回的数值都不带单位

offset获取元素偏移,大小_宽高

 

<style>
.father {
width: 500px;
height: 500px;
background-color: aqua;
position: absolute;
left: 220px;
top: 220px;
}
.son {
width: 150px;
height: 150px;
background-color: blueviolet;
position: absolute;
left: 200px;
top: 150px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
// offset 系列
var father = document.querySelector(".father");
var son = document.querySelector(".son");
// 可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
console.log(son.offsetLeft);
// 可以获得元素的宽高
console.log(son.offsetWidth);
console.log(son.offsetHeight);
// 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent);
console.log(son.offsetNode); //返回父亲最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>