• 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()方法获取不到值的安全替换方法

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了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()方法获取不到值的安全替换方法

相关文章

  • 基于MVC3方式实现下拉列表联动(JQuery)
  • 简洁实用的BootStrap jQuery手风琴插件
  • JQUERY对单选框(radio)操作的小例子
  • jQuery formValidator表单验证
  • Enter回车切换输入焦点实现思路与代码兼容各大浏览器
  • jQuery News Ticker 基于jQuery的即时新闻行情展示插件
  • jQuery中DOM节点的删除方法总结(超全面)
  • DOM操作和jQuery实现选项移动操作的简单实例
  • 7款风格新颖的jQuery/CSS3菜单导航分享
  • jquery zTree异步加载、模糊搜索简单实例分享

文章分类

  • 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对象访问是什么及使用方法介绍
    • json+jQuery实现的无限级树形菜单效果代码
    • 基于jquery实现的定时显示与隐藏div广告的实现代码
    • jquery实现华丽的可折角广告代码
    • JQuery中SetTimeOut传参问题探讨
    • jquery使用jquery.zclip插件复制对象的实例教程
    • 翻译整理的jQuery使用查询手册
    • jquery实现简单的二级导航下拉菜单效果
    • jquery实现提示语淡入效果

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

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