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中遭遇级联表达式陷阱
Mar 08 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
微信小程序实现签到功能
Oct 31 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
js如何实现元素曝光上报
Aug 07 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
javascript实现简易的计算器
Jan 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正则preg_replace_callback函数用法实例
2015/06/01 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python中的django是做什么的
2020/07/31 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
欢迎词范文
2015/01/27 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Golang二维数组的使用方式
2021/05/28 Golang
Go语言空白表示符_的实例用法
2021/07/04 Golang
vue+echarts实现多条折线图
2022/03/21 Vue.js
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android