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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
vue-cli中实现响应式布局的方法
Mar 02 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
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php判断当前操作系统类型
2015/10/28 PHP
删除重复数据的算法
2006/11/23 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
javascript每日必学之循环
2016/02/19 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
python中常用的九种预处理方法分享
2016/09/11 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
django中模板的html自动转意方法
2018/05/27 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python实现名片管理器的示例代码
2019/12/17 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
客服专员岗位职责
2014/02/28 职场文书
房产代理公证处委托书
2014/04/04 职场文书
三年级评语大全
2014/04/23 职场文书
邀请书模板
2015/02/02 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python