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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
在Express中提供静态文件的实现方法
Oct 17 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 中的一些经验积累
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
checkbox使用示例
2013/08/23 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python实现发送邮件及附件功能
2021/03/02 Python
python将视频转换为全字符视频
2019/04/26 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Pycharm调试程序技巧小结
2020/08/08 Python
C#公司笔试题
2014/03/28 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
班主任新年寄语
2014/04/04 职场文书
股东合作协议书
2014/09/12 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL