jQuery 的position()用法

position()方法的定义和用法:

  • position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。
  • 该函数只对可见元素有效。
  • 所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed。
  • 该函数返回一个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。
  • 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。此外,position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。
$("p").position();
  • position()函数的返回值为Object类型,返回一个相对于离它最近的"被定位的"祖辈元素的偏移坐标对象,该对象具有left和top属性。
  • 如果当前jQuery对象匹配多个元素,返回坐标时,position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素,则返回undefined。
  • position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0),向右为正,向下为正。
    实例说明
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        x=$("p").position();
        alert("顶部位置: " + x.top + "左部位置: " + x.left);
    });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<button>返回P元素的位置</button>

</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • DOM操作可分为3个方面:DOM Core(核心)、HTML DOM和CSS DOM(1)DOM Core不属于J...
    寒桥阅读 539评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,422评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,217评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • 早起上班坐地铁,每次都能在车厢里看见靠着座位打瞌睡的人。这时候就想,年轻真是好啊,这种地方都可以小憩一会儿,以后老...
    独木Atree阅读 175评论 0 0