码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-22 01:14:35      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:round   属性   返回   jquer   pad   字符串   htm   http   href   

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>

 

  

 

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

标签:round   属性   返回   jquer   pad   字符串   htm   http   href   

原文地址:https://www.cnblogs.com/yswinwin/p/9515266.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!