jQuery offset() 方法用于获取或设置第一个匹配元素的当前偏移量。

  • 获取偏移量: 当该方法用于获取偏移量时，返回第一个匹配元素的偏移量坐标。它指定对象的两个属性:以像素为单位的顶部和左侧位置。
  • 设置偏移量: 使用此方法设置偏移量时，设置所有匹配元素的偏移量坐标。

语法

//获取偏移坐标:
$(selector).offset() 
//设置偏移坐标:
$(selector).offset({top:value,left:value}) 
//使用函数设置偏移坐标:
$(selector).offset(function(index,currentoffset))

方法参数

参数说明
{top:value,left:value}设置时，它是必选参数。它以像素为单位指定顶部和左侧坐标。
function (index,currentoffset):

这是一个可选参数。它指定了一个函数，该函数返回一个包含顶部和左侧坐标的对象。

  • index:返回集合中元素的索引位置。
  • currentoffset:返回被选元素的当前坐标。

方法示例

<!DOCTYPE html>
<html>
<head>
<title>jQuery offset() 方法例子</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
	$("div").click(function () {
		var offset = $(this).offset();
		$("#lresult").html("left offset: <span>" + offset.left + "</span>.");
		$("#tresult").html("top offset: <span>" + offset.top + "</span>.");
	});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left;}
</style>
</head>
<body>
<p>点击任意方块查看offset值:</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:#7fffd4"></div>
<div style="background-color:#a52a2a"></div>
<div style="background-color:#7fff00"></div>
<div style="background-color:#ff1493"></div>
</body>

</html>