jquery几种获取元素left方式的异同

最新推荐文章于 2024-08-17 04:10:42 发布

weixin_34146986

最新推荐文章于 2024-08-17 04:10:42 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yswinwin/p/9515266.html

本文介绍了 jQuery 中的 offset() 函数，详细解释了如何使用该函数获取或设置元素相对于文档的位置。并通过示例展示了 offset() 函数与其他相关函数的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offset()函数用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标。该函数只对可见元素有效。

该函数返回一个坐标对象(Object)，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。

与position()不同的是：offset()返回的是相对于当前文档的坐标，position()返回的是相对于其定位的祖辈元素的坐标。

该函数属于jQuery对象(实例)。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body,div{
		margin: 0;
		padding: 0;
	}
	#dv{
		width: 200px;
		height: 200px;
		background-color: orange;
		margin-left: 200px;
		position: absolute;
	}



	</style>
	<script src = "jquery-1.12.1.js"></script>
	<script type="text/javascript">

	$(function(){

		$("#btn").click(function(){

			var divLeft = $("#dv").offset()
			console.log(divLeft);//输出的结果是一个对象 ：Object {top: 21, left: 200}
			var divLeft2 = $("#dv").offset().left;
			console.log(divLeft2);//输出结果是 200 数字类型
			var divLeft3 = $("#dv").css("left");
			console.log(divLeft3);//输出结果是 0px 字符串类型，不包括margin ,border: 
			var divLeft4 = $("#dv").scrollLeft();
			console.log(divLeft4);//输出的是 0 数字类型  获取的是卷曲出去的值


			//offset()设置参数

			//offset()传入参数的格式 {"left":100,"top":100}
			$("#dv").offset({"left":100,"top":100});
			
			setTimeout(function() {
				$("#dv").offset({"left":"200","top":"200"});
			}, 2000);
			//传入的值可以是字符串，但是不能带px
			

		});

	})






	</script>
</head>
<body>
	<input type="button" name="" id="btn" value="显示效果" />
	<div id="dv"></div>
</body>
</html>

转载于:https://www.cnblogs.com/yswinwin/p/9515266.html