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 的 trim 函数的代码
Aug 13 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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数字格式化
2006/12/06 PHP
模拟flock实现文件锁定
2007/02/14 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP实现简单登录界面
2019/10/23 PHP
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
关于赌博的检讨书
2014/01/08 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
中学生运动会口号
2014/06/07 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
接待员岗位职责
2015/02/13 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
廉政承诺书范文
2015/04/28 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
《观察物体》教学反思
2016/02/17 职场文书
python 破解加密zip文件的密码
2021/04/22 Python