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 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php输出xml属性的方法
2015/03/19 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
javascript 写类方式之一
2009/07/05 Javascript
关于js datetime的那点事
2011/11/15 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
在线课程:Skillshare
2019/04/02 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
内业资料员岗位职责
2014/01/04 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书