深入理解offset家族属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45699925/article/details/103006037

1、offset家族

1、offsetLeft

//如果父级没有定位 则以到浏览器的距离为准
//如果父级是body  则offsetLeft = d1的border外边算到父元素body的border外边.   包含父元素body的border
//但是如果父元素不是body的话 offsetLeft 则等于 d1的border外边算到父元素d2的border内边. 不包含父元素d2的border
//小心谷歌浏览器神经质  加多1px

2、offsetTop

3、offsetWidth

//offsetWidth = content +padding +border
//offsetHeight = content +padding +border

4、offsetHeight

5、 offsetParent

获取父亲元素parent

6、例子

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
	<style>
		#d1 {
			width: 200px;
			height: 200px;
			color: skyblue;
			border: 40px solid purple;
			padding: 20px;
			margin: 100px;
		}
		
		body {
			border: 20px solid pink;
			padding: 40px;
			position: relative;
		}
		
		#d2 {
			width: 500px;
			height: 500px;
			border: 20px solid orange;
			padding: 40px;
			position: relative;
			margin: 20px;
		}
	</style>
</head>
<body>
	<div id="d2">
		<div id="d1">helloWorld</div>
	</div>
	<script>
		var d1 = document.querySelector('#d1');
		console.log([d1]);
		//如果父级没有定位 则以到浏览器的距离为准
		//如果父级是body  则offsetLeft = d1的border外边算到父元素body的border外边.   包含父元素body的border
		//但是如果父元素不是body的话 offsetLeft 则等于 d1的border外边算到父元素d2的border内边.   不包含父元素d2的border
		//小心谷歌浏览器神经质  加多1px
		console.log(d1.offsetLeft);
		console.log(d1.offsetTop);
		//offsetWidth = content +padding +border
		//offsetHeight = content +padding +border
		console.log(d1.offsetWidth);
		console.log(d1.offsetHeight);
	</script>
</body>
</html>