018_位置和偏移

最新推荐文章于 2025-09-04 12:13:28 发布

原创最新推荐文章于 2025-09-04 12:13:28 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html5

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了jQuery中offset(), position(), scrollLeft()和scrollTop()四个方法的使用。offset()返回元素相对于文档的位置，position()返回相对于父元素的位置，scrollLeft()和scrollTop()则分别用于获取和设置元素的滚动条位置。通过实例代码展示了这些方法的用法，帮助理解它们在实际开发中的应用。

1. offset()方法

1.1. offset()方法返回或设置匹配元素相对于文档的偏移(位置)。

1.2. 返回偏移坐标

1.2.1. offset()方法返回第一个匹配元素的偏移坐标。

1.2.2. offset()方法返回的对象包含两个整型属性: top和left, 以像素计。此方法只对可见元素有效。

1.2.3. 语法

$(selector).offset()

1.3. 设置偏移坐标

1.3.1. offset(value)方法设置每个匹配元素的偏移坐标。

1.3.2. 语法

$(selector).offset(value)

1.3.3. 参数

1.4. 使用函数来设置偏移坐标

1.4.1. offset(function(index,oldoffset))使用函数来设置每一个匹配元素的偏移坐标。

1.4.2. 语法

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

1.4.3. 参数

1.5. 例子

1.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>offset</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					var x = $("p").offset();
    				alert("p元素相对于文档左偏移: " + x.left + " ,上偏移: " + x.top);
				});

				$('#btn2').click(function(){
					$("p:first").offset({left: 10, top: 10});
				});
			});
		</script>
		<style type="text/css">
			* {margin: 0; padding: 0;}
			div {background-color: pink; margin: 10px; padding: 7px;}
			p {margin: 10px; padding: 7px;}
		</style>
	</head>
	<body>
		<div><p style="background-color: red;">offset()方法返回或设置匹配元素相对于文档的偏移(位置)。</p></div>
		<div><p style="background-color: green;">offset()返回第一个匹配元素的偏移坐标。</p></div>
		<button id="btn1">文档的偏移</button> <button id="btn2">设置偏移</button>
	</body>
</html>

1.5.2. 效果图

2. position()方法

2.1. position()方法返回第一个匹配元素相对于父元素的位置(偏移)。

2.2. position()方法返回的对象包含两个整型属性: top和left, 以像素计。

2.3. 此方法只对可见元素有效。

2.4. 语法

$(selector).position()

2.5. 例子

2.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>position()方法</title>
		

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					var x = $("p").position();
    				alert("相对于父元素左边位置: " + x.left + " ,相对于父元素上边位置: " + x.top);
				});

				$('#btn2').click(function(){
					var x = $("#div2 > p").position();
    				alert("相对于父元素左边位置: " + x.left + " ,相对于父元素上边位置: " + x.top);
				});
			});
		</script>
		<style type="text/css">
			* {margin: 0; padding: 0;}
			div {
				width: 600px;
				height: 200px;
			}
			#div1 {
				background: red;
				padding: 10px 20px;
			}
			#div2 {
				background: green;
				position: relative;
			}
			p {
				background: pink;
				width: 300px;
				height: 100px;
			}
			#div2 > p {
				position: absolute;
				top: 30px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1"><p>position()方法返回第一个匹配元素相对于父元素的位置(偏移)。</p></div>
		<div id="div2"><p>position()方法返回的对象包含两个整型属性: top和left, 以像素计。</p></div>
		<br /><button id="btn1">相对于父元素的位置</button> <button id="btn2">绝对定位相对于父元素的位置</button>
	</body>
</html>

2.5.2. 效果图

3. scrollLeft()方法

3.1. scrollLeft()方法返回或设置匹配元素的滚动条的水平位置。

3.2. 滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时, 位置是0。

3.3. 该方法对于可见元素和不可见元素均有效。

3.4. 返回水平滚动条位置

3.4.1. scrollLeft()方法返回第一个匹配元素的水平滚动条位置。

3.4.2. 语法

$(selector).scrollLeft()

3.5. 设置水平滚动条位置

3.5.1. scrollLeft(position)方法设置每一个匹配元素的水平滚动条位置。

3.5.2. 语法

$(selector).scrollLeft(position)

3.5.3. 参数

4. scrollTop()方法

4.1. scrollTop()方法返回或设置匹配元素的滚动条的垂直位置。

4.2. 滚动条的垂直位置指的是从其顶部滚动过的像素数。当滚动条位于最顶部时, 位置是0。

4.3. 该方法对于可见元素和不可见元素均有效。

4.4. 返回垂直滚动条位置

4.4.1. scrollTop()方法返回第一个匹配元素的垂直滚动条位置。

4.4.2. 语法

$(selector).scrollTop()

4.5. 设置垂直滚动条位置

4.5.1. scrollTop(offset)方法设置每一个匹配元素的垂直滚动条位置。

4.5.2. 语法

$(selector).scrollTop(offset)

4.5.3. 参数

4.6. 例子

4.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>scrollLeft()和scrollTop()方法</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
    				alert("第一个div左边滚动条的位置: " + $("div").scrollLeft() + " ,第一个div上边滚动条的位置: " + $("div").scrollTop());
				});
				$('#btn2').click(function(){
					$("div").scrollLeft(20);
					$("div").scrollTop(50);
				});
			});
		</script>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background: red;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				<h2>scrollLeft()方法</h2>
				1. scrollLeft()方法返回或设置匹配元素的滚动条的水平位置。<br />
				2. 滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时, 位置是0。
				<h3>返回水平滚动条位置</h3>
				1. scrollLeft()方法返回第一个匹配元素的水平滚动条位置。<br />
				2. 语法<br />
				$(selector).scrollLeft()
				<h3>设置水平滚动条位置</h3>
				1. scrollLeft(position)方法设置每一个匹配元素的水平滚动条位置。<br />
				2. 语法<br />
				$(selector).scrollLeft(position)
			</p>
		</div>
		<div>
			<p>
				<h2>scrollTop()方法</h2>
				1. scrollTop()方法返回或设置匹配元素的滚动条的垂直位置。<br />
				2. 滚动条的垂直位置指的是从其顶部滚动过的像素数。当滚动条位于最顶部时, 位置是0。
				<h3>返回垂直滚动条位置</h3>
				1. scrollTop()方法返回第一个匹配元素的垂直滚动条位置。<br />
				2. 语法<br />
				$(selector).scrollTop()
				<h3>设置垂直滚动条位置</h3>
				1. scrollTop(offset)方法设置每一个匹配元素的垂直滚动条位置。<br />
				2. 语法<br />
				$(selector).scrollTop(offset)
			</p>
		</div>
		<br /><button id="btn1">返回滚动条的位置</button> <button id="btn2">设置滚动条的位置</button>
	</body>
</html>

4.6.2. 效果图