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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Python中的CSV文件使用"with"语句的方式详解
2018/10/16 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python基于property()函数定义属性
2020/01/22 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
夜大自我鉴定
2013/10/31 职场文书
代理协议书范本
2014/04/22 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
服务员岗位职责范本
2015/04/09 职场文书
公司处罚决定书
2015/06/24 职场文书