代码改变世界

jquery获取元素位置(转)

2013-03-27 15:36  C#与.NET探索者  阅读(656)  评论(0编辑  收藏  举报

为了确定某个元素的位置,可以通过jquery的offset()和position()这两个方法来实现,在书写JS代码的时候是很有用的。主要是要明白这两个方法的异同,使用的时候应该注意什么问题以及在什么时候使用哪种方法?
 

   A:相同点:这两个API函数与其他的jquery API函数不同,返回的不是所引用的包装集而是一个对象,且该对象只包含有两个属性,一个是top,一个是left 。且这两个属性的值都是数字。
       调用方法:$('#myDiv').offset().top  $('#myDiv').offset().left
    B:不同点:
       (1):offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口,不包括浏览器的菜单栏等,当然我们也不太需要使用jquery来控制整个浏览器,我们所要控制的是页面窗口。
            position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式,则其处理方式和offset()一样,是当前窗口的偏移量。
       (2):offset()方法不管该元素师如何定位,也不管父元素是如何定位的,都是获取的该元素相对于当前页面窗口的偏移量。
            position()方法的相对定位的基础是:将子元素的width+padding+border+margin看成是一个整体(也就是这一块的面积),记做B ,将父元素的padding+width看成是一个整体(也就是这一块的面积),记做A;面积B的左上角相对于面积A的左上角的位置。
    C:定位视图:
关于jQuery中的offset()和position()


      在这个视图中,元素A和元素B都可以使用offset()这个API函数获得其相对于浏览器的距离;
      在没有position()这个函数的时候,要计算元素B相对于元素A的位置,需要分别计算offset()的值来做减运算,现在使用position()方法可以直接获得该相对距离的值,(前提是A元素的定位属性不是static)。