jQuery 的position()用法
2017-10-23 本文已影响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>
