编程 Javascript

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

Posted in Javascript onMarch 06, 2014

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：

<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span> 
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>

获取相对(父元素)位置:

<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span> 
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript实现给出的盒子的序列是否可连为一矩型

Aug 30 Javascript

如何确保JavaScript的执行顺序之jQuery.html并非万能钥匙

Mar 03 Javascript

js常用代码段整理

Nov 30 Javascript

JS getAttribute和setAttribute(取得和设置属性)的使用介绍

Jul 10 Javascript

jquery 判断滚动条到达了底部和顶端的方法

Apr 02 Javascript

jquery列表拖动排列(由项目提取相当好用)

Jun 17 Javascript

js用Date对象的setDate()函数对日期进行加减操作

Sep 18 Javascript

js生成随机数(指定范围)的实例代码

Jul 10 Javascript

探索Vue.js component内容实现

Nov 03 Javascript

微信小程序-getUserInfo回调的实例详解

Oct 27 Javascript

vue中js判断长时间不操作界面自动退出登录(推荐)

Jan 22 Javascript

JavaScript canvas实现文字时钟

Jan 10 Javascript

Jquery easyUI 更新行示例

Mar 06 #Javascript

js toFixed()方法的重写实现精度的统一

Mar 06 #Javascript

button没写type=button会导致点击时提交

Mar 06 #Javascript

使用jQuery时Form表单元素ID和name命名大忌

Mar 06 #Javascript

js字符串日期yyyy-MM-dd转化为date示例代码

Mar 06 #Javascript

浅析JS中document对象的一些重要属性

Mar 06 #Javascript

浅析jquery的js图表组件highcharts

Mar 06 #Javascript

You might like

PHP 和 MySQL 开发的 8 个技巧

2006/10/09 PHP

php UTF-8、Unicode和BOM问题

2010/05/18 PHP

Symfony2框架学习笔记之表单用法详解

2016/03/18 PHP

PHP实现权限管理功能示例

2017/09/22 PHP

不要在cookie中使用特殊字符的原因分析

2010/07/13 Javascript

js利用事件的阻止冒泡实现点击空白模态框的隐藏

2014/01/24 Javascript

使用javascript实现json数据以csv格式下载

2015/01/09 Javascript

javascript使用appendChild追加节点实例

2015/01/12 Javascript

理解javascript中DOM事件

2015/12/25 Javascript

JS实现CheckBox复选框全选、不选或全不选功能

2020/07/28 Javascript

JQuery EasyUI的使用

2016/02/24 Javascript

详解Javascript继承的实现

2016/03/25 Javascript

Bootstrap学习笔记之js组件（4）

2016/06/12 Javascript

jquery 动态合并单元格的实现方法

2016/08/26 Javascript

JavaScript String(字符串)对象的简单实例(推荐)

2016/08/31 Javascript

jQuery Dialog 取消右上角删除按钮事件

2016/09/07 Javascript

清除js缓存的多种方法总结

2016/12/09 Javascript

jQuery Masonry瀑布流插件使用方法详解

2017/01/18 Javascript

angular.js 路由及页面传参示例

2017/02/24 Javascript

jquery 手势密码插件

2017/03/17 Javascript

AngularJS使用拦截器实现的loading功能完整实例

2017/05/17 Javascript

Vue cli3 库模式搭建组件库并发布到 npm的流程

2018/10/12 Javascript

微信小程序学习笔记之获取位置信息操作图文详解

2019/03/29 Javascript

vue中使用 pako.js 解密 gzip加密字符串的方法

2019/06/10 Javascript

Vue中关闭弹窗组件时销毁并隐藏操作

2020/09/01 Javascript

Python批量按比例缩小图片脚本分享

2015/05/21 Python

Python实现购物系统(示例讲解)

2017/09/13 Python

简单了解Django ContentType内置组件

2019/07/23 Python

如何使用Cython对python代码进行加密

2020/07/08 Python

Python Selenium模块安装使用教程详解

2020/07/09 Python

python mongo 向数据中的数组类型新增数据操作

2020/12/05 Python

澳大利亚百货公司：David Jones

2018/02/08 全球购物

优秀部门获奖感言

2014/02/14 职场文书

学习走群众路线心得体会

2014/11/05 职场文书

Java 超详细讲解IO操作字节流与字符流

2022/03/25 Java/Android

5人制售《绝地求生》游戏外挂获利500多万元被判刑

2022/03/31 其他游戏