JavaScript中的offset

最新推荐文章于 2025-01-21 00:00:00 发布

原创最新推荐文章于 2025-01-21 00:00:00 发布 · 691 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

本文详细解释了offsetLeft属性的含义及使用场景，包括其在不同元素定位方式下的具体计算方法。通过实例展示了如何获取元素相对父元素或body的水平位置。

一.offsetLeft：元素的border与父元素border之间的距离。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
	*{margin: 0;padding: 0;}
#div1{ width: 200px;height: 200px;background: red;
background-clip:content-box;padding: 15px;border: solid 20px pink;
 margin: 20px;position: relative;
     }
#div2{ width: 100px;height: 100px;background: yellow;padding:5px;border:solid 6px black ;margin: 10px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
	window.onload=function() {
	var oDiv = document.getElementById("div2");
	alert(oDiv.offsetLeft);	
	}
</script>
</head>

<body>
<div id="div1">
	<div id="div2"></div>
</div>
</body>
</html>

首先将所有元素的margin和padding设置为0；

当div1的position设置为absolute或relative时，div2的offsetLeft值为

div1的padding（15px）+div2的margin（10px）=25px