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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Augularjs-起步详解
Jul 08 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
php实现图片压缩处理
2020/09/09 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python操作redis方法总结
2018/06/06 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python实现简易淘宝购物
2019/11/22 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
英文版区域经理求职信
2013/10/23 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
家庭经济困难证明
2015/06/23 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android