编程 Javascript

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>

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript Perfection kill 测试及答案

Mar 23 Javascript

浏览器的JavaScript引擎的识别方法

Oct 20 Javascript

JQuery中$(document)是什么意思有什么作用

Jul 21 Javascript

使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法

Sep 16 Javascript

js如何准确获取当前页面url网址信息

Sep 13 Javascript

深入浅析Extjs中store分组功能的使用方法

Apr 20 Javascript

js和C# 时间日期格式转换的简单实例

May 28 Javascript

15位和18位身份证JS校验的简单实例

Jul 18 Javascript

探究JavaScript中的五种事件处理程序方式

Dec 07 Javascript

jquery实现图片轮播器

May 23 jQuery

js 提取某()特殊字符串长度的实例

Dec 06 Javascript

vue-admin-template配置快捷导航的代码（标签导航栏）

Sep 04 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

phpmail类发送邮件函数代码

2012/02/20 PHP

使用 PHPMAILER 发送邮件实例应用

2012/11/07 PHP

php实现文件下载实例分享

2014/06/02 PHP

PHP 实现代码复用的一个方法 traits新特性

2015/02/22 PHP

双冒号 ::在PHP中的使用情况

2015/11/05 PHP

PHP实现统计所有字符在字符串中出现次数的方法

2017/10/17 PHP

php 算法之实现相对路径的实例

2017/10/17 PHP

淘宝搜索框效果实现分析

2011/03/05 Javascript

Javascript页面添加到收藏夹的简单方法

2013/08/07 Javascript

Jquery中的层次选择器与find()的区别示例介绍

2014/02/20 Javascript

nodejs导出excel的方法

2015/06/30 NodeJs

详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())

2016/08/15 Javascript

JS字符串长度判断,超出进行自动截取的实例(支持中文)

2017/03/06 Javascript

vue.js移动端app实战1：初始配置详解

2017/07/24 Javascript

详解如何将 Vue-cli 改造成支持多页面的 history 模式

2017/11/20 Javascript

vue中阻止click事件冒泡,防止触发另一个事件的方法

2018/02/08 Javascript

JS中的函数与对象的创建方式

2019/05/12 Javascript

RxJS在TypeScript中的简单使用详解

2020/04/13 Javascript

通过实例了解JS执行上下文运行原理

2020/06/17 Javascript

js实现随机点名功能

2020/12/23 Javascript

[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官

2014/06/11 DOTA

python写xml文件的操作实例

2014/10/05 Python

详细解读Python的web.py框架下的application.py模块

2015/05/02 Python

Python切片操作实例分析

2018/03/16 Python

python机器人运动范围问题的解答

2019/04/29 Python

Python基于Opencv来快速实现人脸识别过程详解（完整版）

2019/07/11 Python

浅谈ROC曲线的最佳阈值如何选取

2020/02/28 Python

迪拜航空官方网站：flydubai

2017/04/20 全球购物

俄罗斯运动鞋商店：Sneakerhead

2018/05/10 全球购物

如何启动时不需输入用户名与密码

2014/05/09 面试题

入学生会自荐书范文

2014/02/05 职场文书

担保书格式及范文

2014/04/01 职场文书

考博导师推荐信范文

2015/03/27 职场文书

红色电影观后感

2015/06/18 职场文书

nginx配置ssl实现https的方法示例

2021/03/31 Servers

「月刊Action」2022年5月号封面公开

2022/03/21 日漫