编程 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 相关文章推荐

一个JS翻页效果

Jul 23 Javascript

JQuery遍历json数组的3种方法

Nov 08 Javascript

jquery京东商城双11焦点图多图广告特效代码分享

Sep 06 Javascript

javascript jquery对form元素的常见操作详解

Jun 12 Javascript

分类解析jQuery选择器

Nov 23 Javascript

vue cli webpack中使用sass的方法

Feb 24 Javascript

Angular6新特性之Angular Material

Dec 28 Javascript

Vue 设置axios请求格式为form-data的操作步骤

Oct 29 Javascript

在vue中使用Echarts利用watch做动态数据渲染操作

Jul 20 Javascript

解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

Aug 05 Javascript

javascript的hashCode函数实现代码小结

Aug 11 Javascript

浅谈es6中的元编程

Dec 01 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实现有趣的人品测试程序实例

2015/06/08 PHP

PHP让网站移动访问更加友好方法

2019/02/14 PHP

JavaScript charCodeAt方法入门实例（用于取得指定位置字符的Unicode编码）

2014/10/17 Javascript

javascript实现设置、获取和删除Cookie的方法

2015/06/01 Javascript

javascript中alert()与console.log()的区别

2015/08/26 Javascript

JS深度拷贝Object Array实例分析

2016/03/31 Javascript

基于Bootstrap3表格插件和分页插件实例详解

2016/05/17 Javascript

Angular的Bootstrap(引导)和Compiler(编译)机制

2016/06/20 Javascript

JavaScript提升性能的常用技巧总结【经典】

2016/06/20 Javascript

详解ECMAScript6入门--Class对象

2017/04/27 Javascript

Angular浏览器插件Batarang介绍及使用

2018/02/07 Javascript

vue2.0+koa2+mongodb实现注册登录

2018/04/10 Javascript

你点的 ES6一些小技巧,请查收

2018/04/25 Javascript

Nodejs对postgresql基本操作的封装方法

2019/02/20 NodeJs

javascript面向对象三大特征之继承实例详解

2019/07/24 Javascript

JavaScript canvas实现雪花随机动态飘落

2020/02/08 Javascript

JavaScript实现简单进度条效果

2020/03/25 Javascript

jQuery实现可以计算进制转换的计算器

2020/10/19 jQuery

[01:03:36]Ti4 循环赛第三日DK vs Titan

2014/07/12 DOTA

[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局

2016/03/05 DOTA

matplotlib绘制动画代码示例

2018/01/02 Python

解决python执行不输出系统命令弹框的问题

2019/06/24 Python

python DataFrame转dict字典过程详解

2019/12/26 Python

Python和Anaconda和Pycharm安装教程图文详解

2020/02/04 Python

python pandas.DataFrame.loc函数使用详解

2020/03/26 Python

Python+Xlwings 删除Excel的行和列

2020/12/19 Python

HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法

2013/04/24 HTML / CSS

英国Lookfantastic中文网站：护肤品美妆美发购物（英国直邮）

2020/04/27 全球购物

通用C#笔试题附答案

2016/11/26 面试题

医学生实习自荐信

2013/10/01 职场文书

工作失误检讨书范文大全

2014/01/13 职场文书

学校四风对照检查材料

2014/08/28 职场文书

给上级领导的感谢信

2015/01/22 职场文书

管理人员岗位职责

2015/02/14 职场文书

总结Python连接CS2000的详细步骤

2021/06/23 Python

磁贴还没死，微软Win11可修改注册表找回Win10开始菜单

2021/11/21 数码科技