jQuery offset()

admin發表於2017-10-28
jQuery

此方法返回或設定所匹配元素相對於document物件的偏移量。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.offset()

如果沒有引數，那麼功能就是獲取匹配元素相對於document物件的偏移量。

返回值是一個包含偏移量的物件，它包含兩個屬性:top和left。

此方法只對可見元素有效。

jQuery1.2版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.offset(coords)

引數解析:

coords:一個包含top和left屬性的物件，用整數指明元素的新頂部和左邊座標。

jQuery1.4版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.offset(function(index,oldvalue))

引數解析:

function:此函式返回一個包含匹配元素新座標的物件。index:可選，表示當前元素的索引（從0開始），oldvalue:可選，表示包含當前元素座標的物件。

jQuery1.4版本新增。

特別說明:當設定元素的座標，如果物件原先position屬性是static，會被改成relative來實現重定位。 

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>offset()函式-螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
.box{
  border:1px solid black;
  width:400px;
  height:300px;
  padding:10px;
  margin:50px;
}
.ant{
  height:150px;
  width:200px;
  margin-left:50px;
  background-color:green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    var coords = $(".ant").offset();
    alert("元素的偏移量座標是：" + coords.top + "|" + coords.left);
   })
})
</script>
</head>
<body>
<div class="box">
  <div class="ant"></div>
</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

以上程式碼可以彈出子div相對於document的偏移量。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  border:1px solid black;
  width:400px;
  height:300px;
}
.ant{
  height:150px;
  width:200px;
  background-color:green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $(".ant").offset({
      top: 100,
      left: 100
    })
  })
})
</script>
</head>
<body>
<div class="box">
  <div class="ant"></div>
</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

以上程式碼可以設定div相對於document的偏移量。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  border:1px solid black;
  width:400px;
  height:300px;
}
.ant{
  height:150px;
  width:200px;
  background-color:green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $(".ant").offset(function (index, coords) {
      var newpoint= new Object();
      newpoint.top = coords.top + 50;
      newpoint.left = coords.left + 50;
      return newpoint;
    })
  })
})
</script>
</head>
<body>
<div class="father">
  <div class="ant"></div>
</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

以上程式碼同樣可以設定元素的偏移，不過值是通過回撥函式的返回值值。

相關文章