JavaScript学习笔记（setoff家族）

最新推荐文章于 2023-04-01 09:04:13 发布

今天很喜欢小水

最新推荐文章于 2023-04-01 09:04:13 发布

阅读量291

点赞数

分类专栏：学习笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_46384159/article/details/117018675

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

offset的中文是：偏移、补偿、位移。
js中比较简洁的获取元素的尺寸。offset家族包括：

offsetHight
offsetWidth
offsetLeft
offsetRight
offsetParent

offsetWidth
offsetHeight
offsetLeft
offsetRight
offsetParent
下面分别介绍。

1.offsetWidth 和 offsetHeight

用于检测盒子自身的宽高 + padding + border，不包括margin。如下：

offsetWidth = 自身width + 自身padding + 自身border;
offsetHeight = 自身Height + 自身padding + 自身border;
这两个属性，他们绑定在了所有的节点元素上。
获取之后，只要调用这两个属性，我们就能够获取元素的宽和高。

举例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 200px;
				color: skyblue;
				border: 40px solid purple;
				padding: 20px;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		style="left:300px" 
		 -->
		<div id="d1"style="left:300px">
			helloworld
		</div>
		<script type="text/javascript">
			var d1 = document.querySelector("#d1")
			console.log([d1])
			console.log(d1.offsetHeight)
			console.log(d1.offsetWidth)
			//offsetHeight = content + padding + border
			//offsetWidth = content + padding + border
		</script>
	</body>
</html>

输出结果：在这里插入图片描述

offsetWidth打印结果是：320（width + padding2 + border2）

2.offsetLeft 和 offsetTop

返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准。
offsetLeft ,offsetTop = 父元素的边框+父元素的内边距+元素的外边距）
举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				border: 20px solid deeppink;
				position: relative;
				padding: 40px;
			}
		#d1{
				width: 200px;
				height: 200px;
				color: skyblue;
				border: 40px solid purple;
				padding: 20px;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		style="left:300px" 
		 -->
		<div id="d1"style="left:300px">
			helloworld
		</div>
		<script type="text/javascript">
			var d1 = document.querySelector("#d1")
			console.log([d1])
			
			 console.log(d1.offsetTop)
			 console.log(d1.style.left)
			
		</script>
	</body>
</html>

输出结果：在这里插入图片描述
offsetTop = (d1.margin(100px) + body.padding(40px) + body.border(20px))
offLeft同理

3.offsetParent

检测父系盒子中带有定位的父盒子节点，返回结果是该对象的父级（带有定位）。

如果当前元素的父元素，没有css定位，那么offsetParent的返回结果为body。
如果当前元素的父级元素，有css定位，那么offsetParent的返回结果为距离当前元素坐进的父元素。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				border: 20px solid deeppink;
				position: relative;
				padding: 40px;
			}
			
			.parent{
				width: 600px;
				height: 600px;
				border: 1px solid black;
			}
			
			#d1{
				width: 200px;
				height: 200px;
				color: skyblue;
				border: 40px solid purple;
				padding: 20px;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		style="left:300px" 
		 -->
		 <div class="parent"><div id="d1"style="left:300px">
			helloworld
		</div></div>
		
		<script type="text/javascript">
			var d1 = document.querySelector("#d1")
			console.log([d1])
			
			console.log(d1.offsetParent)
			
		</script>
	</body>
</html>

在这里插入图片描述
setoffParent的输出结果为：body
虽然的d1的父级元素为.Parent 但是.Parent并未添加css定位，所以返回结果为body.

offsetLeft和style.left之间的区别

（1）.最大区别就是：
offsetLeft可以返回没有定位盒子的距离为左侧的位置
如果父系盒子中都没有定位，以body为准。
offset.left只能获取行内式，如果没有，则返回“”（意思是，返回空）；
（2）offsetTop返回的是数字，而style.top返回的是字符串，而且还有带单位：px.
举例：

div.offsetLeft = 100;
div.style.left = "100px"

（3）offsetLeft和offsetTop 只读，而style.left和style.top可读写（只读是获取值，可写是赋值）
（4）如果没有给HTML 元素指定过top样式，则style.top返回的是空字符串。
总结：我们一般的做法是：用offsetLeft和offsetTop获取值，用style.left和style.top赋值，理由如下：

style.left:只能获取行内式，获取的值可能为空，容易出现NAN。
offsetLeft:获取值特别方便，而且是现成的number，方便计算，它是只读的，不能赋值。

今天很喜欢小水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（setoff家族）

offset的中文是：偏移、补偿、位移。js有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：offsetWidthoffsetHeightoffsetLeftoffsetRightoffsetParent下面分别介绍。1.offsetWidth 和 offsetHeight用于检测盒子自身的宽高 + padding + border，不包括margin。如下：offsetWidth = width + padding + border;offsetHei
复制链接

扫一扫