📌  相关文章
📜  jQuery | offset() 与示例(1)

📅  最后修改于: 2023-12-03 15:32:12.376000             🧑  作者: Mango

jQuery | offset() 与示例

jQuery中的offset()方法返回元素相对于文档的偏移量。即使页面发生滚动，该方法也能够返回准确的值。

语法
$(selector).offset()
返回值
  • 返回两个属性：top和left，分别表示元素距离文档顶部和左侧的距离。
示例

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Offest() 示例</title>
	<style type="text/css">
		body {
			height: 2000px;
		}
		#box {
			position: absolute;
			top: 200px;
			left: 300px;
			background-color: red;
			padding: 10px;
			color: white;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="js/main.js"></script>
</head>
<body>
	<div id="box">示例内容</div>
</body>
</html>

JS代码：

$(document).ready(function() {
	var offset = $("#box").offset();
	alert("距离顶部：" + offset.top + "，距离左侧：" + offset.left);
});

该示例创建了一个绝对定位的矩形#box，偏移量为(200px, 300px)。页面滚动时，偏移量不变，offset()始终返回相同的值。

输出：

距离顶部：200，距离左侧：300
参考链接