Jquery中的offset()和position()的区别
类别:Web前端 浏览量:642
时间:2014-7-10 Jquery中的offset()和position()的区别
Jquery中的offset()和position()的区别一、Jquery中offset()
获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
例如
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="jquery脚本URL"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>
</body>
</html>
二、Jquery中position()
获取匹配元素相对父元素的偏移。 更通俗一点,含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素,那么会计算相对于文档(即视区左上角)的位置. 返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。
例如
<!DOCTYPE html>
<html>
<head>
<style>
li { padding: 15px;}
p { margin-left:10px; }
</style>
<script src="jquery脚本URL"></script>
</head>
<body>
<li>
<p>Hello</p>
</li>
<p></p>
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>
三、offset()和position()的区别
1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口,不包括浏览器的菜单栏等,当然我们也不太需要使用jquery来控制整个浏览器,我们所要控制的是页面窗口。
2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式,则其处理方式和offset()一样,是当前窗口的偏移量。
3、使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
4、使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
您可能感兴趣
- javascript取下拉框显示值(JavaScript offset实现鼠标坐标获取和窗口内模块拖动)
- scrollWidth,clientWidth,offsetWidth的区别
- Jquery中的offset()和position()的区别
- laravel前后端分离实现排序(laravel自定义分页的实现案例offset和limit)
- 还在卖 禁药西布曲明网上论斤卖(还在卖禁药西布曲明网上论斤卖)
- 微商在朋友圈热卖的 DL减肥咖啡 含违禁药物,你还敢买吗(微商在朋友圈热卖的)
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
热门推荐
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- .net中生成不重复的随机数
- phpstudy安装包打不开(phpStudy访问速度慢和启动失败的解决办法)
- dedecms模板如何修改日期(DEDECMS网站文章列表页更新点击次数的问题完美解决)
- opencv提取图像轮廓python代码(Python基于opencv调用摄像头获取个人图片的实现方法)
- sqlparameter的用法介绍
- php闰年计算公式(php判断/计算闰年的方法小结三种方法)
- dedecms会员入驻(dedecms会员注册成功后直接跳转到验证的邮箱地址)
- laravel查询条件数组写法(解决Laravel 使用insert插入数据,字段created_at为0000的问题)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)