美文网首页
jQuery 的position()用法

jQuery 的position()用法

作者: 是叶 | 来源:发表于2017-10-23 18:19 被阅读0次

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>

相关文章

网友评论

      本文标题:jQuery 的position()用法

      本文链接:https://www.haomeiwen.com/subject/ohgauxtx.html