PC端网页特效-offset系列属性

2023-10-13 16:41:22

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>

码农公寓

相关文章