元素偏移量offset

hcoke

已于 2022-04-03 16:32:09 修改

阅读量441

点赞数

分类专栏： JavaScript js 学习笔记文章标签： JavaScript 前端

于 2022-04-03 15:32:07 首次发布

本文链接：https://blog.csdn.net/m0_62962469/article/details/123938223

版权

学习笔记同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

JavaScript

40 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

offset系列常用元素属性：

offset系列属性	作用
Element.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
Element.offsetTop	返回元素相对带有定位父元素上方的偏移
Element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
Element.offseWidth	返回自身包括边框，内容区的宽度，返回数值不带单位
Element.offseHeight	返回自身包括边框，内容区的高度，返回数值不带单位

注意：返回的数值不带单位；

获得元素距离根据带有定位的父元素而定假如没有含有定位的父元素就默认得出与body的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.father {
				position: relative; //加了定位之后，	console.log(son.offsetLeft);表示的是距离父元素father左边框的距离
				margin: 200px;
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
			
			.son {
				width: 100px;
				height: 100px;
				background-color: pink;
				margin-left: 50px;
			}
			
			.w {
				/* width: 300px; */
				height: 300px;
				border: 10px solid red;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
		<div class="w"></div>
		<script type="text/javascript">
			var father = document.querySelector('.father');
			var son = document.querySelector('.son');
			var w = document.querySelector('.w');
			//1.可以得到元素的偏移 位置 返回的不带单位的数值
			console.log(father.offsetLeft);
			console.log(father.offsetTop);
			//它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准
			console.log(son.offsetLeft);
			//2.可以得到元素的大小 宽度 和 高度 包含 padding + border + width
			console.log(son.offsetHeight);
			console.log(w.offsetWidth);
			//3.返回带有定位的父亲 否则返回的是body
			console.log(son.parentNode);   //返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
			console.log(son.offsetParent);  //返回带有定位的父亲 否则返回的是body
		</script>
	</body>
</html>

offset与style的区别：

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding + border + width	style.width不包含padding + border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
想要获取元素大小位置，用offset更合适	想要给元素更改值，则需要用style改变

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
元素偏移量offset

offset系列常用元素属性：offset系列属性作用 Element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body Element.offsetTop 返回元素相对带有定位父元素上方的偏移 Element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 Element.offseWidth 返回自身包括边框，内容区的宽度，返回数值不带单位 Element.offseHeight 返回
复制链接

扫一扫