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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
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
Zerg兵种介绍
2020/03/14 星际争霸
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
面包屑导航详解
2017/12/07 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
理解Python垃圾回收机制
2016/02/12 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python selenium 弹出框处理的实现
2019/02/26 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
搞笑获奖感言
2014/01/30 职场文书
企业办公室岗位职责
2014/03/12 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
国庆节演讲稿
2014/05/27 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
身份证丢失证明
2015/06/19 职场文书
禁毒主题班会教案
2015/08/14 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
PHP获取学生成绩的方法
2021/11/17 PHP
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android