jQuery position()方法

快乐打工仔 分类:实例代码

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

它会返回一个对象,对象具有top和left属性,分别表示纵向和横向偏移量。

偏移量分两种情况,一种是父级元素具有定位元素,另一种父级元素没有定位元素。

代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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元素的外边距边缘开始计算的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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元素的具有定位的父级元素,那么偏移量就以此父级元素作为参考。

jQuery position()方法,这样的场景在实际项目中还是用的比较多的,关于jQuery position()方法就介绍到这了。

jQuery position()方法属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容