• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery.position()方法获取不到值的安全替换方法

jQuery.position()方法获取不到值的安全替换方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery.position(),方法,安全替换方法等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

调用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
    };
};

这虽然产生了多余的代码,但比较可靠的多,用的让人放心。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery.position()方法获取不到值的安全替换方法

相关文章

  • 2017-08-16jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
  • 2017-08-16很酷的60款jQuery 幻灯片演示和下载
  • 2017-08-16jQuery 获取对象 定位子对象
  • 2017-08-16jQuery实现的简洁下拉菜单导航效果代码
  • 2017-08-16jQuery插件ajaxFileUpload使用详解
  • 2017-08-16jQuery实现限制文本框的输入长度
  • 2017-08-16基于jquery的返回顶部效果(兼容IE6)
  • 2017-08-16常用的jquery模板插件——jQuery Boilerplate介绍
  • 2017-08-16jQuery CheckBox全选、全不选实现代码小结
  • 2017-08-16jQuery库与其他JS库冲突的解决办法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 用jquery实现输入框获取焦点消失文字
    • jQuery Div中加载其他页面的实现代码
    • jQuery.getScript加载同域JS的代码
    • jquery判断输入密码两次是否相等
    • 基于jquery实现二级联动效果
    • jquery+CSS3模拟Path2.0动画菜单效果代码
    • jquery图片上下tab切换效果
    • jquery实现无刷新验证码的简单实例
    • jQuery 获取屏幕高度、宽度的简单实现案例
    • MVC+jQuery.Ajax异步实现增删改查和分页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有