竞博体育 > 数据 > 无论元素的父元素或祖先元素的position属性是什么,此方法获取或者设置匹配元素在当前document的相对偏移

无论元素的父元素或祖先元素的position属性是什么,此方法获取或者设置匹配元素在当前document的相对偏移

jQuery的offset()和position()用法详解,jqueryoffset

offset()和position()用法详解:
竞博体育 ,这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这两个方法的用法。
下面先看一下它们基本的定义:
1.offset()方法的定义:
此方法获取或者设置匹配元素在当前document的相对偏移。
此方法只对可见元素有效。 
当获取偏移量时,方法的返回值是一个包含两个整型属性(top和left)的对象。
设置偏移量时,此方法的参数是带有top和left属性的对象。
具体用法可以参阅jQuery的offset()方法一章节。
2.position()方法的定义:
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性(top和left)的对象。
为精确计算结果,请在补白、边框和填充属性上使用像素单位。
此方法只对可见元素有效。
具体用法可以参阅jQuery的position()方法一章节。
但是此方法并非只有定义的那么简单,在实际应用中,它的返回值也并非只是获取匹配元素相对父元素的偏移量。
实际上position()方法是将元素以CSS的绝对定位来处理,也就是position属性值为absolute(当然并不是将元素的的定位方式真的设置为绝对定位),这个时候它的定位参考对象准确的来说应该是距离它最近的一个拥有定位的父元素,和CSS的绝对定位的原则是一样的,可以参阅position绝对定位以哪个对象为参考一章节。
代码实例如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>offset()和position()用法详解-蚂蚁部落</title>
<style type="text/css"> 
body{ 
  margin:15px; 
  width:960px; 
} 
.parent{ 
  border:3px solid #ccc; 
  width:600px; 
  height:300px; 
  margin-left:55px; 
  padding:25px; 
} 
.child{ 
  background:#666; 
  width:200px; 
  height:200px; 
  color:#fff; 
} 
.copyright{ 
  position:absolute; 
  right:0; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  $(".child").each(function(){  
    var text = "position().left="+$(this).position().left;  
    text +="<br>position().top="+$(this).position().top;  
    text +="<br>offset().left="+$(this).offset().left;  
    text +="<br>offset().top="+$(this).offset().top;  
    text +="<br>其parent的offset().top="+$(this).parents(".parent").offset().top;  
    text +="<br>其parent的offset().left="+$(this).parents(".parent").offset().left;  
    $(this).html(text);  
  }) 
}) 
</script> 
</head> 
<body> 
<div class="parent" style="float:right"> 
  父容器的position是默认值,static。子容器的position为默认值,static。offset和position值相同 
  <div class="child"></div> 
</div> 
<div style="clear:both"></div> 
<div class="parent" style="position:relative">  
  父容器的position是相对定位ralative,子容器的position为默认值static。offset和position值不同 
  <div class="child"></div> 
</div> 
<br/> 
<div style="position:absolute;padding:15px;border:3px solid #ff0000;"> 
  <div class="parent">  
    祖父容器的position是绝对定位absolute,子容器的position为默认值static。offset和position值不同 
    <div class="child"></div> 
  </div> 
</div> 
</body> 
</html>

最后总结:
1.offset()方法获取的是匹配元素相对于文档的偏移量,和对象本身和父元素的定位方式是无关的。
2.position()方法稍稍复杂一些:
1).如果祖辈元素中有采用绝对定位或者相对定位者,则此方法获取的偏移量将以最近的采用定位的的祖辈元素为参考。
2).如果祖辈元素中没有采用绝对定位或者相对定位者,则此方法获取的偏移量将以窗口为参考对象。

原文地址是:

更多内容可以参阅:

offset()和position()用法详解: 这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这...

本文实例分析了Jquery中offset()和position()的区别。分享给大家供大家参考。具体分析如下:

一、Jquery中offset()

获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
 
例如:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.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>

二、Jquery中position()

获取匹配元素相对父元素的偏移。 更通俗一点,含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素,那么会计算相对于文档(即视区左上角)的位置. 返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。

例如:

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

三、offset()和position()的区别  
1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口,不包括浏览器的菜单栏等,当然我们也不太需要使用jquery来控制整个浏览器,我们所要控制的是页面窗口。

2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式,则其处理方式和offset()一样,是当前窗口的偏移量。

3、使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

4、使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。

5、一般情况下,如果要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;如果显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的。

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery position() 函数详解以及jQuery中position函数的应用
  • jQuery的position()方法详解
  • jQuery.position()方法获取不到值的安全替换方法
  • jQuery中position()方法用法实例
  • Jquery中的offset()和position()深入剖析
  • jQuery Position方法使用和兼容性
  • 首页
  • 电话
  • 软件