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 相关文章推荐
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
axios 处理 302 状态码的解决方法
Apr 10 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
JavaScript实现网页计算器功能
Oct 29 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python模块的制作方法实例分析
2019/12/21 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
中专毕业生自我鉴定
2013/11/21 职场文书
大学新生欢迎词
2014/01/10 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
业务员自荐信范文
2014/04/20 职场文书
科技之星事迹材料
2014/06/02 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
如何解决php-fpm启动不了问题
2021/11/17 PHP