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的eval()中使用函数的进一步讨论
Jul 26 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
wxpython实现图书管理系统
2018/03/12 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python视频按帧截取图片工具
2019/07/23 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
python两个list[]相加的实现方法
2020/09/23 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
Java如何支持I18N?
2016/10/31 面试题
文员自我评价怎么写
2013/09/19 职场文书
全国文明单位申报材料
2014/05/31 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫