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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
如何构建一个Vue插件并生成npm包
Oct 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设计模式 State (状态模式)
2011/06/26 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
关于vue面试题汇总
2018/03/20 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python获取栅格点和面值的实现
2020/03/10 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
YII2 全局异常处理深入讲解
2021/03/24 PHP
综合素质自我评价怎么写
2014/09/14 职场文书
埃及王子观后感
2015/06/16 职场文书
市场营销计划书
2019/04/24 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android