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 document.createDocumentFragment()
Apr 04 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jquery实现显示已选用户
Jul 21 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JS如何判断json是否为空
Jul 06 Javascript
EsLint入门学习教程
Feb 17 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
Sep 04 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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
用mysql内存表来代替php session的类
2009/02/01 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
Javascript Objects详解
2014/09/04 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
js实现拖拽功能
2017/03/01 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
解析Python中while true的使用
2015/10/13 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python实现决策树分类
2018/08/30 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
老人祝寿主持词
2014/03/28 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
整改通知书格式
2015/04/22 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
同学会感言
2015/07/30 职场文书