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 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python与pycharm有何区别
2020/07/01 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
html5的localstorage详解
2017/05/09 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
linux面试题参考答案(10)
2016/10/26 面试题
人事主管岗位职责
2014/01/30 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
公司借条范本
2015/05/25 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python