jQuery position()方法

antzone發表於2017-04-18
jQuery

此方法可以返回匹配元素相對於指定元素的偏移量。

它會返回一個物件，物件具有top和left屬性，分別表示縱向和橫向偏移量。

偏移量分兩種情況，一種是父級元素具有定位元素，另一種父級元素沒有定位元素。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0;
  padding:0;
}
#box{
  width:300px;
  height:200px;
  background:#ccc;
  margin:100px;
  overflow:hidden;
}
#middle{
  width:200px;
  height:150px;
  background:green;
  margin:20px;
  overflow:hidden;
}
#inner{
  width:120px;
  height:80px;
  background:black;
  margin:20px;
  color:white
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  var str="";
  str=str+$("#inner").position().left+"<br/>"
  str=str+$("#inner").position().top;
  $("#inner").html(str);
});
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>

inner元素的父級元素中沒有定位元素，那麼偏移量是相對於文件的。

特別說明:偏移量值是從inner元素的外邊距邊緣開始計算的。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0;
  padding:0;
}
#box{
  width:300px;
  height:200px;
  background:#ccc;
  margin:100px;
  overflow:hidden;
}
#middle{
  width:200px;
  height:150px;
  background:green;
  margin:20px;
  overflow:hidden;
  position:relative;
}
#inner{
  width:120px;
  height:80px;
  background:black;
  margin:20px;
  position:relative;
  left:10px;
  top:20px;
  color:white;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  var str="";
  str=str+$("#inner").position().left+"<br/>"
  str=str+$("#inner").position().top;
  $("#inner").html(str);
});
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>

inner元素的具有定位的父級元素，那麼偏移量就以此父級元素作為參考。

相關文章