jQuery.position()方法获取不到值的安全替换方法
调用jQuery.position()方法会返回相对于父元素的位置，jQuery官方文档中描述说，它跟.offset()方法不一样，.offset()返回的是相对于document的位置，而.position()返回的是相对于父元素的位置。
但事实上，在使用的过程中，我们发现.position()返回的值经常是0。但事实不是0。尤其是谷歌浏览器和IE浏览器里。火狐浏览器没有此问题。
究其原因，以基于Webkit的浏览器(谷歌浏览器和Safari浏览器)为例，只有当元素(图片、flash等)完全加载后，浏览器才能访问到这些元素的高度和宽度，而火狐浏览器是在DOM加载完成后就能访问这些属性，它不需要知道这个元素的完整尺寸。而谷歌浏览器就不行。因此在谷歌/IE这样的浏览器里，如果你想使用.position()获取元素的偏移量，往往得到值就是初始值:0。
有一种补救的方法是将你的.position()调用放到 $(window).load()事件触发之后，而不是$(document).ready事件之后。但这种方法也未必可靠。
另外一种变通的方法是用.offset()来换算：
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
这虽然产生了多余的代码，但比较可靠的多，用的让人放心。
相关文章
这篇文章主要为大家详细介绍了Jquery UI 模仿淘宝搜索下拉列表功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了jQuery使用之设置元素样式用法,实例分析了jQuery如何设置页面的样式风格,包括添加、删除、动态切换等的使用技巧,需要的朋友可以参考下2015-01-01
jQuery Mobile中的button按钮组件基础使用教程
jQuery Mobile中的button默认提供了很多用于制作移动Web页面按钮的属性,这里我们来整理一下jQuery Mobile中的button按钮组件基础使用教程,需要的朋友可以参考下2016-05-05
jquery.tableSort.js表格排序插件使用方法详解
这篇文章主要为大家详细介绍了jquery.tableSort.js表格排序插件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
本篇文章小编为大家介绍，使用jQuery获取浏览器中的分辨率的方法。需要的朋友参考下2013-04-04
当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的，解决方法就是加一句阻止冒泡即可2014-09-09
这篇文章主要为大家详细介绍了使用jquery Ajax实现上传附件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了jQuery实现字符串全部替换的方法,结合实例形式对比分析了使用Replace进行替换的方法及使用正则进行全部替换的相关操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要记录了在近期开发中遇到的jQuery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
jQuery插件DataTable使用方法详解(.Net平台)
这篇文章主要为大家详细介绍了jQuery插件DataTable使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论