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 相关文章推荐
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 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防止跨域提交表单
2013/11/01 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
小学体育教学反思
2014/01/31 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
劳模先进事迹材料
2014/12/24 职场文书
运动会闭幕词
2015/01/28 职场文书
新党员入党决心书
2015/09/22 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server