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 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
浅析vue component 组件使用
Mar 06 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
检测一个函数是否是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文件操作简单介绍及函数汇总
2020/12/11 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
Angular CLI 安装和使用教程
2017/09/13 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python操作json的方法实例分析
2018/12/06 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
python 获取计算机的网卡信息
2021/02/18 Python
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
工程师岗位职责
2013/11/08 职场文书
办公室岗位职责
2014/02/12 职场文书
规范化管理年活动总结
2014/08/29 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL