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和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
数组Array的排序sort方法
Feb 17 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
ztree+ajax实现文件树下载功能
May 18 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Python中序列的修改、散列与切片详解
2017/08/27 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python制作朋友圈九宫格图片
2019/11/03 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
毕业自我鉴定书
2014/03/24 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
解除合同协议书范本
2016/03/21 职场文书