jQuery获取页面元素绝对与相对位置的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下:

获取页面某一元素的绝对X,Y坐标,可以用offset()方法:

var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;

获取相对(父元素)位置:

var X = $('#DivID').position().top; 
var Y = $('#DivID').position().left; 
var pleft = $("selector").scrollLeft();//元素相对于滚动条左边的偏移量
var pTop = $("selector").scrollTop();//元素相对于滚动条顶部的偏移量

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
Javascript中的getUTCHours()方法使用详解
Jun 10 #Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 #Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 #Javascript
javascript中一些util方法汇总
Jun 10 #Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 #Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 #Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 #Javascript
You might like
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python3实现随机数
2018/06/25 Python
python elasticsearch环境搭建详解
2019/09/02 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
军训学生自我鉴定
2014/02/12 职场文书
文化宣传方案
2014/03/13 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
《故乡》教学反思
2014/04/10 职场文书
小学评语大全
2014/04/22 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
爬山的活动方案
2014/08/16 职场文书
学习退步检讨书
2014/09/28 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python