css

css

开发工具与关键技术：css
作者：唐文坚
撰写时间：2020.9.27
offset([coordinates])：
概述
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
参数
coordinates{top,left} Object
必需。规定以像素计的 top 和 left 坐标。
可能的值：值对，比如 {top:100,left:0}、带有 top 和 left 属性的对象
function(index,coords)function规定返回被选元素新偏移坐标的函数。
index - 可选。接受选择器的 index 位置、oldvalue - 可选。接受选择器的当前坐标
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
结果:
<p>Hello</p><p>left: 0, top: 35</p>
参数coordinates 描述:
获取第二段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });
position()：
概述：
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
描述:
获取第一段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
结果:
<p>Hello</p><p>left: 15, top: 15</p>
scrollTop([val])
概述
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
参数
valString, Number
设定垂直滚动条值
无参数描述:
获取第一段相对滚动条顶部的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:
<p>Hello</p><p>scrollTop: 0</p>
参数val 描述:
设置相对滚动条顶部的偏移
jQuery 代码:
$("div.demo").scrollTop(300);