jQuery.position()方法获取不到值的安全替换方法


Posted in Javascript onMarch 13, 2015

调用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

    };

};

这虽然产生了多余的代码,但比较可靠的多,用的让人放心。
Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
如何用JavaScipt测网速
May 09 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 #Javascript
DOM操作一些常用的属性汇总
Mar 13 #Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 #Javascript
jQuery源码分析之Callbacks详解
Mar 13 #Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 #Javascript
Javascript定义类(class)的三种方法详解
Mar 13 #Javascript
JavaScript中5种调用函数的方法
Mar 12 #Javascript
You might like
劣质的PHP代码简化
2010/02/08 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
PHP微信分享开发详解
2017/01/14 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
JS判断数组那点事
2017/10/10 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python openpyxl使用方法详解
2019/07/18 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
六十岁生日答谢词
2014/01/10 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
保安公司服务承诺书
2014/05/28 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
教师节晚会主持词
2015/06/30 职场文书
javascript函数式编程基础
2021/09/15 Javascript
python模板入门教程之flask Jinja
2022/04/11 Python