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

在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. java的loadrunner脚本案例

    /* * LoadRunner Java script. (Build: 670) *  * ״̬£º²¢·¢²âÊÔͨ¹ý * ²âÊÔÈË£ºÕÔС±ò * ÈÕÆÚ£º2013-09-2 ...

  2. jquery ajax的再次封装,简化操作

    1.封装的ajax var funUrl=""   // 每个请求地址相同的部分 function queryData(url,params,success,error){ url ...

  3. supervisor 的使用

    1.通过yum安装 supervisor: 2.supervisorctl 查看状态: 3.supervisor.d 下查看配置文件,修改命令和日志目录 4.tail -f /var/log/supe ...

  4. java版云笔记(八)之关联映射

    Mybatis关联映射 通过数据库对象之间的关联关系,反映到到实体对象之间的引用. 加载多个表中的关联数据,封装到我们的实体对象中. 当业务对数据库进行关联查询. 关联 <association ...

  5. HDU 4300 Clairewd’s message(KMP+思维)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4300 题目大意:题目大意就是给以一段字符xxxxzzz前面x部分是密文z部分是明文,但是我们不知道是从 ...

  6. HDU 3085 Nightmare Ⅱ(双向BFS)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3085 题目大意:给你一张n*m地图上,上面有有 ‘. ’:路 ‘X':墙 ’Z':鬼,每秒移动2步,可 ...

  7. POJ 3278 Catch That Cow(简单BFS)

    题目链接:http://poj.org/problem?id=3278 题目大意:给你两个数字n,k.可以对n执行操作(n+1,n-1,n*2),问最少需要几次操作使n变成k. 解题思路:bfs,每次 ...

  8. opencv的CMakeLists.txt与makefile写法

    opencv的CMakeLists.txt cmake_minimum_required(VERSION 2.8) project(my_run_name) find_package(OpenCV R ...

  9. 洛谷 P1652圆 题解

    题目传送门 这道题也就是考你对几何的了解: 圆与圆没有公共点且一个圆在另一个圆外面时,叫做圆与圆相离. 当圆心距大于两圆半径之和时,称为两圆外离: 当圆心距小于两圆半径之差的绝对值时,称为两圆内含. ...

  10. 一次压力测试Loadrunner经验分享

    一次压力测试Loadrunner经验分享 http://blog.csdn.net/lxlmj/article/category/553431 loadrunner测试socketstcpserver ...