jQuery offset() 方法

定义和用法

offset() 方法设置或返回被选元素相对于文档的偏移坐标。

当用于返回偏移时

该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

 $(selector).offset()

当用于设置偏移时

该方法设置所有匹配元素的偏移坐标。

$(selector).offset({top:value,left:value})

使用函数设置偏移坐标

$(selector).offset(function(index,currentoffset))

语法

参数 描述
当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。
可能的值：
1. 键/值对，比如 {top:100,left:100}
2. 一个带有 top 和 left 的对象（实例）
function(index,currentoffset) 可选。规定返回包含 top 和 left 坐标的对象的函数。
1. index - 返回集合中元素的 index 位置。
2. currentoffset - 返回被选元素的当前坐标。

DEMO

使用函数设置偏移坐标

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo-jq-offset</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").offset(function(n,c){
			newPos=new Object();
			newPos.left=c.left+100;
			newPos.top=c.top+100;
			return newPos;
		});
	});
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<button>设置P元素的偏移坐标</button>

</body>
</html>

使用另一个元素的偏移坐标为元素设置偏移坐标

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo-jq-offset</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").offset($("span").offset());
	});
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<button>设置p元素的偏移坐标等于span元素</button>
<span style="position:absolute;left:100px;top:150px;">这是一个span</span>

</body>
</html>
posted @ 2021-10-01 14:53  zakun  阅读(225)  评论(0)  编辑  收藏  举报
返回顶部