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 学习笔记(八)javascript对象
Apr 12 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
详解tween.js的使用教程
Sep 14 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 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开发中常用的字符串操作函数
2011/02/08 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
smarty中常用方法实例总结
2015/08/07 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
电大自我鉴定范文
2013/10/01 职场文书
网吧消防安全制度
2014/01/28 职场文书
教师自我反思材料
2014/02/14 职场文书
赡养老人协议书
2014/04/21 职场文书
小学二年级学生评语
2014/04/21 职场文书
保护环境倡议书范文
2014/05/13 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
活动宣传稿范文
2015/07/23 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL