offset概述:offset翻译是偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
· 获得元素距离带有定位父元素的位置
· 获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位
offset系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回<body>
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度,返回数值不带单位
element.offsetHeight 返回自身包括padding、边框、内容区的高度,返回数值不带单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetLeft和offsetTop获取元素偏移</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-left: 45px;
}
.w {
width: 79px;
height: 79px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
// offset概述:offset翻译是偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
// 获得元素距离带有定位父元素的位置
// 获得元素自身的大小(宽度高度)
// 注意:返回的数值都不带单位
//offset系列属性 作用
//element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回<body>
//element.offsetTop 返回元素相对带有定位父元素上方的偏移
//element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
//element.offsetWidth 返回自身包括padding、边框、内容区的宽度,返回数值不带单位
//element.offsetHeight 返回自身包括padding、边框、内容区的高度,返回数值不带单位
var father = document.querySelector('.father');
var son = document.querySelector('.son');
//1.可以得到元素的偏移 位置 返回不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
//它以带有定位的父亲为准 如果没有父亲或是父亲没有定位 则以body为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
//2.可以得到元素的大小 宽度 和高度 是包含padding+border+width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
//3.返回带有定位的父亲 否则返回的是<body>
console.log(son.offsetParent);//返回带有定位的父亲 否则返回的是<body>
console.log(son.parentNode);//返回父亲 是最近一级的父亲 亲爸爸不管父亲有没有定位
</script>
</body>
</html>