JQuery 获得绝对,相对位置的坐标方法


Posted in Javascript onFebruary 09, 2010

var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>java Test</title> 
</head> 
<style type="text/css"> 
<!-- 
body,div { margin:0; padding:0;} 
--> 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> <body> 
<div style="background:#ccc;height:300px;" onclick=""></div> 
<div style="position:relative;"> 
<div style=" position:absolute;left:50px; top:50px;" id="DivID"></div> 
</div> 
<script type="text/javascript"> 
var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left; 
document.write(X+"<br />"); 
document.write(Y+"<br />"); 
//获取相对(父元素)位置: 
var C = $('#DivID').position().top; 
var D = $('#DivID').position().left; 
document.write(C+"<br />"); 
document.write(D); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
javascript 解析url的search方法
Feb 09 #Javascript
toString()一个会自动调用的方法
Feb 08 #Javascript
jQuery AJAX回调函数this指向问题
Feb 08 #Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
React实现轮播效果
2020/08/25 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python抓取网页中的图片示例
2014/02/28 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python中正则表达式的详细教程
2015/04/30 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
python中spy++的使用超详细教程
2021/01/29 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
上课迟到检讨书
2014/01/19 职场文书
专项法律服务方案
2014/06/11 职场文书
服务理念标语
2014/06/18 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2015年公司新年寄语
2014/12/08 职场文书
寒山寺导游词
2015/02/03 职场文书
撤诉申请书法院范本
2015/05/18 职场文书