offsetLeft和offsetTop怎么用

最新推荐文章于 2023-12-22 16:28:01 发布

原创最新推荐文章于 2023-12-22 16:28:01 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了offsetLeft和offsetTop属性的应用场景，并通过两个实例对比了这两种属性在不同定位方式下的表现，帮助读者理解如何利用这些属性实现元素精确布局。

前言:

如果需要动态计算标签的距离时，我们时常会用到这两个属性offsetLeft和offsetTop，我的使用场景是，我有一个背景的div1，另一个div2并不在div1内，但是我需要让div2在div1的又下角，如果我使用margin-left或margin-top,在不同分辨率之间切换时都会有改变，所以这时候就用到啦这两个属性。

正文：

先粘贴两段代码，你们粘到自己编辑器里试试效果，F12看下控制台的区别

情况一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		 <script type="text/javascript">
			function codd(){
				var obj1=document.getElementById('cc');
			    console.log(obj1.offsetLeft);
			    console.log(obj1.offsetTop);
			}
		</script>
	</head>
	<body>
		<div id="aa" style="width:400px; height:400px; background:#0f0; margin-left:10px;">
			<div id="bb" style="width:300px; height:300px; background:#00f; margin-left:10px;">
				<div id="cc" style="width:200px; height:200px; background:#000; margin-left:10px;" onclick="codd()"></div>
			</div>
		</div>
	</body>
</html>

情况二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		 <script type="text/javascript">
			function codd(){
				var obj1=document.getElementById('cc');
			    console.log(obj1.offsetLeft);
			    console.log(obj1.offsetTop);
			}
		</script>
	</head>
	<body>
		<div id="aa" style="width:400px; height:400px; background:#0f0; margin-left:10px;">
			<div id="bb" style="width:300px; height:300px; background:#00f; margin-left:10px;  position: absolute;">
				<div id="cc" style="width:200px; height:200px; background:#000; margin-left:10px;" onclick="codd()"></div>
			</div>
		</div>
	</body>
</html>

情况二比情况一多了一个属性position:absolute，这样控制台打印的就不一样啦，重点来啦，在页面任一元素的offsetLeft或offsetTop总是找到离其最近的已经定位的元素定位，如果没有，就根据根节点body定位，然后获取其left值或top值。