jquery如何获取和设置元素位置
jquery如何获取和设置元素位置。
工具/原料
FrontPage
电脑
方法/步骤
获取和设置当前元素位置
1、offset() 返回值：Object{top,left}
概述：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
示例：
描述：获取第二段的偏移。
HTML代码：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">2nd Paragraph
</body>
jQuery代码：
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">left: 0, top: 21
</body>
2、offset(coordinates)，返回值：jQuery
概述：
设置匹配元素相对于document对象的坐标。.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是static的话，会被改成relative来实现重定位。
参数：
coordinates，Object{top,left}类型或 function(index, coords)类型。一个对象，必须包含top和left属性，作为元素的新坐标。这个参数也可以是一个返回一对坐标的函数，函数的第一个参数是元素的索引，第二个参数是当前的坐标。
示例：墨拒宿
描述：获取第二段的偏移。
HTML代码：Hello2nd Paragraph
jQuery代码：$("p:last").offset({ top: 10, left: 30 });
获取当前元素相对父元素的位置
position()，返回值：Object{top,left}
概述：
获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
示例：
描述：获取第一段的偏移。
HTML代码：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">2nd Paragraph
</body>
jQuery代码：
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
结果：购脾
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">left: 0, top: 0
</body>
获取和设置当前元素相对滚动条顶部的位置
1、scrollTop()，返回值：Integer
概述：获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏光娃元素均有效。
示例：
描述：获取第一段相对滚动条顶部的偏移
HTML代码：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">2nd Paragraph
</body>
jQuery代码：
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">scrollTop: 0
</body>
2、scrollTop(val)，返回值：jQuery
概述：传递参数值时，设置垂直滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。
参数：val，String类型或Number类型，设定垂直滚动条值。
示例：
描述：设置相对滚动条顶部的偏移。
jQuery代码：$("div.demo").scrollTop(300);
获取和设置当前元素相对滚动条左侧的位置
1、scrollLeft()，返回值：Integer
概述：获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
示例：
描述：获取第一段相对滚动条左侧的偏移。
HTML代码：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">2nd Paragraph
</body>
jQuery代码：
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
结果：
<body topmargin="0px" leftmargin="0px">
<p style="margin:0 0;">Hello
<p style="margin:0 0;">scrollLeft: 0
</body>
2、scrollLeft(val)，返回值：jQuery
概述：传递参数值时，设置水平滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。
参数：val，String类型或Number类型，设定水平滚动条值。
示例
描述：设置相对滚动条左侧的偏移。
jQuery代码：$("div.demo").scrollLeft(300);
注意事项
将元素的margin值赋值为0px，不然获取的结果会加上margin值。