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

最新推荐文章于 2022-07-01 11:46:32 发布

夏大爷耶耶耶

最新推荐文章于 2022-07-01 11:46:32 发布

阅读量409

点赞数 1

分类专栏： JS笔记文章标签： html 前端 css

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121325389

版权

JS笔记专栏收录该内容

39 篇文章 3 订阅

订阅专栏

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>

夏大爷耶耶耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端网页特效-offset系列属性

offset概述：offset翻译是偏移量，使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。· 获得元素距离带有定位父元素的位置· 获得元素自身的大小(宽度高度)注意：返回的数值都不带单位 offset系列属性作用element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回<body>element.offsetTop 返回元素相对带有定位父元素上方的偏移elem...
复制链接

扫一扫