.offset()


html+div+css+天猫商城
html5+css3+京东手机网站
javascript+jquery+ajax
正则表达式+面向对象+js插件
2D+3D+触屏事件+Canvas+Svg
地理信息+本地存储+H5拖拽api
查看课程大纲
在匹配的元素集合中,获取的第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。

Contents:

.offset()返回: Object

描述: 在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。

  • 添加的版本: 1.2.offset()

    • 这个方法不接受任何参数

.offset()方法允许我们检索一个元素 (包含其 border 边框,不包括 margin) 相对于文档(document)的当前位置。和.position()的差别在于:.position()是相对于相对于父级元素的位移。当通过全局操作(特别是通过拖拽操作)将一个新的元素放置到另一个已经存在的元素的上面时,若要取得这个新的元素的位置,那么使用 .offset() 更合适。

.offset()返回一个包含topleft属性的对象 。

注意:jQuery不支持获取隐藏元素的偏移坐标。也不支持计算设置在 <html> 文档元素上的边距(margin)。

若元素的属性设置的是 visibility:hidden,那么我们依然可以取得它的坐标。但是若设置的属性是 display:none,由于在绘制 DOM 树时根本就不绘制该元素,所以它的位置属性值是 undefined。

例子:

Example: 使用第二个段落的位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>
</body>
</html>

Demo:

Example: 点击查看位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; color:blue; width:200px;
cursor:pointer; }
span { color:red; cursor:pointer; }
div.abs { width:50px; height:50px; position:absolute;
left:220px; top:35px; background-color:green;
cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result">Click an element.</div>
<p>
This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>
<script>
$("*", document.body).click(function (e) {
var offset = $(this).offset();
e.stopPropagation();
$("#result").text(this.tagName + " coords ( " + offset.left + ", " +
offset.top + " )");
});
</script>
</body>
</html>

Demo:

.offset( coordinates )返回: jQuery

描述: 设置匹配的元素集合中每一个元素的坐标, 坐标相对于文档。

  • 添加的版本: 1.4.offset( coordinates )

    • coordinates
      类型: PlainObject
      一个包含topleft属性的对象,用整数指明元素的新顶部和左边坐标。
  • 添加的版本: 1.4.offset( function(index, coords) )

    • function(index, coords)
      类型: Function()
      返回用于设置坐标的一个函数。接收元素在匹配的元素集合中的索引位置作为第一个参数,和当前坐标作为第二个参数。这个函数应该返回一个包含topleft属性的对象。

.offset()方法允许我们重新设置元素的位置。这个元素的 边框(border-box) 位置是相对于document对象的。如果对象原先的.position()样式属性是static的话,会被改成relative来实现重定位。

例子:

设置第二个段落的位置:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<style>p { margin-left:10px; } </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>$("p:last").offset({ top: 10, left: 30 });</script>
</body>
</html>

Demo: