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 While 循环基础教程
Apr 05 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
React中this丢失的四种解决方法
Mar 12 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中插入当前时间
2008/04/06 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
javascript 函数速查表
2010/02/07 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
react native 文字轮播的实现示例
2018/07/27 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
高二英语教学反思
2014/01/19 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
青奥会口号
2014/06/12 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python