---恢复内容开始---

在jQuery中有两个获取元素位置的方法offset()和position()。position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢?

先看看API对这这两个方法的定义:

offset():

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

position():

获取匹配元素相对父元素的偏移。

返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

真的就这么简单吗?实践出真知。

先来看看在jQuery框架源码里面,是怎么获得position()的:

//Get *real* offsetParent
var offsetParent = this.offsetParent(),
//Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? {
top : 0,
left : 0
}
: offsetParent.offset();
//Subtract element margins
//note: when an element has margin: auto the offsetLeft and marginLeft
//are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num(this, marginTop);
offset.left -= num(this, marginLeft);
//Add offsetParent borders
parentOffset.top += num(offsetParent, borderTopWidth);
parentOffset.left += num(offsetParent, borderLeftWidth);
//Subtract the two offsets
results = {
top : offset.top - parentOffset.top,
left : offset.left - parentOffset.left
};

注意最后那段 代码:

results = {
top: offset.top- parentOffset.top,
left: offset.left - parentOffset.left
};

代码的意思就是获取本身元素距离它的父元素的距离。

用图如下所示:

也就是元素B距离元素A的距离。

在没有position()方法之前,计算B到A的距离 只有通过 先计算B距浏览器左边距 减去 A的。

有了position()方法之后,就可以快速计算出来。不过在使用position()之前,你需要了解一下它们的定位方式。

经过试验,会得出如下结论:

1.使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
2.使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前文档窗口的相对偏移。
3.使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前文档(document)视口的偏移。
4.offset()的计算不包括元素本身的 margin 值(包括border值),position() 的计算包括 margin值。

那么我们应该如何来合理的使用position()和offset()呢? 

就我个人的经验,通常获取一个元素A的位置是为了让另外的一个元素B正好出现在A元素的附近。通常有2种情况:

1.要显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body),这个时候用offset()是最好的;

2.若要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;

那么我现在问你,如果我打算做一个跟随屏幕滚动的层,使用哪个方法呢?

如果你答得是:offset(),那么恭喜你。

如果我打算做一个类似于幻灯片的效果,你会使用哪个方法呢?

综上所述,使用position()还是offset()取决于你被控制的元素B DOM所在的位置。

延伸阅读:

JavaScript如何获取/计算页面元素的offset?

jQuery入门(2)使用jQuery操作元素的属性与样式

关于jQuery中的 offset() 和 position() 的用法的更多相关文章

  1. 关于jQuery中的offset()和position()

    在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该 ...

  2. Jquery中的offset()和position()深入剖析(元素定位)

    先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...

  3. Jquery中的offset()和position()深入剖析

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  4. 区分jquery中的offset和position

    一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...

  5. Jquery中的offset()和position()

    今天遇到这个偏移量的问题,特做此记录.以便日后查看. 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见 ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  8. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  9. 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

随机推荐

  1. [转载]Firefox插件(plugins)开发实用指南

    转自: http://huandu.me/2010/02/11/595/ Firefox插件可实现强大功能,但其中麻烦事情不少.写这个实用指南首先是为了方便自己记忆,免得以后再次栽倒一些坑里面,如果能 ...

  2. java你应该学会什么

    给初学者之一:浅谈java及应用学java 先说什么是Javajava是一种面向对象语言,真正的面向对象,任何函数和变量都以类(class)封装起来至于什么是对象什么是类,我就不废话了关于这两个概念的 ...

  3. Sklearn-GridSearchCV网格搜索

    GridSearchCV,它存在的意义就是自动调参,只要把参数输进去,就能给出最优化的结果和参数.但是这个方法适合于小数据集,一旦数据的量级上去了,很难得出结果.这个时候就是需要动脑筋了.数据量比较大 ...

  4. Linux创建ftp并设置权限以及忘记ftp帐号(密码)修改

    忘记ftp密码修改方法: 1.登录服务器 cd  /etc/vsftpdcat ftpusers找到对应的ftp用户名 (如果用户名也忘记了 那么 cd /etc 然后cat passwd 查看用户和 ...

  5. javaScript传递参数,参数变化问题

    值传递 var a=10; b(a); function b(v){ v--; } alert(a); //out 10 对象传递 var a={}; a.v=10; b(a); function b ...

  6. hive的窗口函数cume_dist、fercent_rank

    一.cume_dist 这两个序列分析函数不是很常用,这里也介绍一下.注意: 序列函数不支持WINDOW子句. 数据准备: d1,user1, d1,user2, d1,user3, d2,user4 ...

  7. 常用的scrapy setting

    原文请参考    Scrapy 爬虫入门教程十三 Settings(设置), 讲的很详细 官网参考  Settings 设置 Scrapy 设置允许您自定义所有 Scrapy 组件的行为,包括核心,扩 ...

  8. 在WebClient类中保持Session

    string url = context.Request["url"]; WebClient MyWebClient = new WebClient(); // 获取或设置用于向I ...

  9. C# 使用UDP组播实现局域网桌面共享

    最近需要在产品中加入桌面共享的功能,暂时不用实现远程控制:参考了园子里的一些文章,加入了一些自己的修改. 需求:将一台机器的桌面通过网络显示到多个客户端的屏幕上,显示内容可能为PPT,Word文档之类 ...

  10. centOS7.0配置防火墙

    之前用的iptables来管理的防火墙,后来发现centOS7.0中已经用firewalld取代iptables了,于是与时俱进,停用了iptables. systemctl stop iptable ...