.offset()
.offset() 返回： Object
描述： 為匹配的元素集合中獲取第一個(gè)元素的當(dāng)前坐標(biāo)，相對(duì)于文檔（document）。
version added: 1.2.offset()
.offset()方法允許我們檢索一個(gè)元素相對(duì)于文檔（document）的當(dāng)前位置。和.position()的差別在于：.position()是相對(duì)于相對(duì)于父級(jí)元素的位移。當(dāng)定位在全局環(huán)境中（比如拖放的實(shí)現(xiàn)）最高的一個(gè)新元素時(shí).offset()是非常有用的。
.offset()返回一個(gè)包含top 和 left屬性的對(duì)象 。
注意：jQuery不支持獲取隱藏元素的偏移坐標(biāo)。
舉例：
例子： 使用第二個(gè)段落的位置：
<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.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:
例子 點(diǎn)擊查看位置。
<!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.min.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
描述： 設(shè)置匹配的元素集合中每個(gè)元素的當(dāng)前坐標(biāo)，相對(duì)于文檔（document）。
-
version added: 1.4.offset( coordinates )
coordinates一個(gè)包含
top和left屬性的對(duì)象，用整數(shù)指明元素的新頂部和左邊坐標(biāo)。 -
version added: 1.4.offset( function(index, coords) )
function(index, coords)返回用于設(shè)置坐標(biāo)的一個(gè)函數(shù)。接收元素在匹配的元素集合中的索引位置作為第一個(gè)參數(shù)，和當(dāng)前坐標(biāo)作為第二個(gè)參數(shù)。這個(gè)函數(shù)應(yīng)該返回一個(gè)包含
top和left屬性的對(duì)象。
.offset()方法允許我們重新設(shè)置元素的位置，這個(gè)元素的位置是相對(duì)于document對(duì)象的。如果對(duì)象原先的position樣式屬性是static的話(huà)，會(huì)被改成relative來(lái)實(shí)現(xiàn)重定位。
舉例：
設(shè)置第二個(gè)段落的位置:
<!DOCTYPE html>
<html>
<head>
<style>p { margin-left:10px; } </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>$("p:last").offset({ top: 10, left: 30 });</script>
</body>
</html>