jQuery offset方法结合easyui-menu进行使用

最新推荐文章于 2024-04-08 08:50:19 发布

原创最新推荐文章于 2024-04-08 08:50:19 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了jQuery中offset()和position()两种获取元素位置的方法，并详细解释了它们之间的区别及应用场景。offset()用于获取元素相对于文档的位置，而position()则用于获取元素相对于最近的定位父元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jQuery中有两个获取元素位置的方法offset()和position()

position()方法是在1.2.6版本之后加入的，为什么要引入这个方法呢？这两个方法之间有什么异同？使用的时候应该注意哪些问题？什么时候使用offset(),什么时候又使用position()呢？
先看看API对这这两个方法的定义：

offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

$("button").click(function(){
var x=$("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});

offset() 方法设置或返回被选元素相对于文档的偏移坐标。
当用于返回偏移时：
该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
当用于设置偏移时：
该方法设置所有匹配元素的偏移坐标。


<div id="mm" class="easyui-menu" style="width:120px;">  
      <div>New</div>  
      <div>  
          <span>Open</span>  
         <div style="width:150px;">  
              <div><b>Word</b></div>  
              <div>Excel</div>  
              <div>PowerPoint</div>  
          </div>  
     </div>  
     <div iconCls="icon-save">Save</div>  
     <div class="menu-sep"></div>  
     <div>Exit</div>  
 </div>

// 必须加 创建菜单
$("#mm").menu();
//显示菜单
$("#mm").menu('show',{
left:$(this).offset().left,
top:$(this).offset().top+$(this).height()
});