元素偏移offset的常用属性

offset是偏移量的意思，使用offset相关的属性可以动态得到元素的位置(偏移)、大小等。

• 可以获得该元素距离带有定位父元素的位置
• 可以获得元素自身的大小(宽和高)
• offset返回的值都是不带单位的，只返回数字

offset常用属性	作用
element.offsetParent	返回该元素带有定位的父元素，如果父级都没有定位返回body
element.offsetTop	返回元素带有定位父元素距离上方的偏移量
element.offsetLeft	返回元素带有定位父元素距离左边的偏移量
element.offsetWidtht	返回自身的宽度，包括padding、border、内容区，返回值不带单位px
element.offsetHeight	返回自身的高度，包括padding、border、内容区，返回值不带单位px

element.offsetParent返回的是带有定位的父亲，如果父级都没有定位，则返回body。
和parentNode不一样，parentNode返回的是最近的父元素，不管这个父元素有没有带定位都会返回。

offsetLeft和offsetTop代码示例：

<style>
* {
	margin: 0;
	padding: 0;
}
.box {
	width: 150px;
	height: 150px;
	background-color: slateblue;
	margin-left: 50px;
	margin-top: 100px;
}
.box2 {
	width: 50px;
	height: 50px;
	background-color: springgreen;
}
</style>
	<div class="box">
		<div class="box2"></div>
	</div>
<script>
	var box = document.querySelector(".box");
	var box2 = document.querySelector(".box2");
	console.log(box.offsetLeft); // 输出50
	console.log(box.offsetTop); // 输出100
	console.log(box2.offsetLeft); // 也输出50，因为父元素box没有带定位，就以body为准
</script>

offsetWidth和offsetHeight代码示例：
可以得到元素自身的大小，包含padding、border、width

<style>
* {
	margin: 0;
	padding: 0;
}
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	background-color: slateblue;
	margin-left: 50px;
	margin-top: 100px;
}
</style>
	<div class="box"></div>
<script>
	var box = document.querySelector(".box");
     console.log(box.offsetWidth); // 输出170，因为包含了padding值
</script>