javascript学习-offset家族

最新推荐文章于 2024-11-08 16:09:18 发布

加油吧qaq

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量122

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107651344

版权

本文深入讲解了JavaScript中offset家族的概念及应用，包括offsetWidth、offsetHeight、offsetLeft、offsetTop和offsetParent等属性的详细解释，以及它们在网页布局和元素定位中的作用。

摘要由CSDN通过智能技术生成

offset家族

offset：偏移，补偿，位移。

js中有一套方便的获取元素尺寸的方法就是offset家族。offset家族包括：

offsetWidth和offsetHight

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

offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
例子：

		<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" >
					helloworld
				</div>
				<script type="text/javascript">
					var d1 = document.querySelector("#d1")
					console.log(d1.offsetWidth)//320=200+20+40+20+40
					console.log(d1.offsetHeight)//320=200+20+40+20+40
				</script>
	</body>

offsetLeft和offsetTop

返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准。

offsetLeft、offsetTop：父元素的边框 + 父元素的内边距 + 元素的外边距

		<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" >
					helloworld
				</div>
				<script type="text/javascript">
					var d1 = document.querySelector("#d1")
					console.log(d1.offsetTop)  //160=100+40+20
					console.log(d1.offsetLeft) //160=100+40+20
				</script>
	</body>

【注】如果没有position: relative结果是168会直接找到html，此时body有个默认magin为8。

offsetParent

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

如果当前元素的父级元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为body。
如果当前元素的父级元素，有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为最近的那个父级元素。