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>
Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
JS获取时间的方法
Jan 21 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
通过构造函数实例化对象的方法
Jun 28 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
利用js canvas实现五子棋游戏
Oct 11 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函数常用用法小结
2010/02/08 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python 连连看连接算法
2008/11/22 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python字典的常用操作方法小结
2016/05/16 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
django使用JWT保存用户登录信息
2020/04/22 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
公司建议书怎么写
2014/05/15 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
事业单位年度考核评语
2014/12/31 职场文书
投标单位介绍信
2015/05/05 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android