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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
全面了解JavaScript的作用域链
Apr 03 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/10/02 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
php简单获取复选框值的方法
2016/05/11 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
详解redux异步操作实践
2018/08/15 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
pygame实现打字游戏
2021/02/19 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
业务员的岗位职责
2014/03/15 职场文书
护理见习报告范文
2014/11/03 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
实施意见格式范本
2015/06/05 职场文书
思想工作总结范文
2015/08/12 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2019年思想汇报
2019/06/20 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL