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在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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
PHP 中的一些经验积累
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
jQuery插件jsonview展示json数据
2018/05/26 jQuery
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
简历里的自我评价范文
2014/02/24 职场文书
颁奖典礼主持词
2014/03/25 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Python之matplotlib绘制折线图
2022/04/13 Python