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启动应用程序的一个简单例子
May 11 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
详解用node编写自己的cli工具
May 23 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
js实现简易计算器小功能
Nov 18 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
yii的CURD操作实例详解
2014/12/04 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
php 基础函数
2017/02/10 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
对Django url的几种使用方式详解
2019/08/06 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
幼儿园安全检查制度
2014/01/30 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python