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 显示当前系统时间代码
Dec 28 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
js转换对象为xml
Feb 17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
js中null与空字符串""的区别讲解
Jan 17 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
JS实现多选框的操作
Jun 24 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/11/25 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
浅析Python中的多重继承
2015/04/28 Python
python类继承用法实例分析
2015/05/27 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
实用求职信范文分享
2013/12/25 职场文书
高中毕业自我评价
2014/02/08 职场文书
考试诚信承诺书
2014/05/23 职场文书
七一建党日演讲稿
2014/09/05 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
关于运动会的广播稿
2015/08/19 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL