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 相关文章推荐
用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 其他游戏