获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;)

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> 

JQuery 获得绝对,相对位置的坐标方法的更多相关文章

  1. JQuery 获得div绝对,相对位置的坐标方法

    获取页面某一元素的绝对X,Y坐标 var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: v ...

  2. jQuery 学习笔记(4)(文本值相关方法、操控CSS方法、位置和尺寸方法)

    1.文本值相关方法 .html() == .innerHTML $("div").html("<span> ...</span>") / ...

  3. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  4. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  5. Android View各种尺寸位置相关的方法探究

    Android View各种尺寸位置相关的方法探究 本来想做一个View间的碰撞检测之类的. 动手做了才发现不是想象的那么简单. 首先,写好了碰撞检测的工具类如下: package com.mengd ...

  6. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  7. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  9. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. 「LuoguP3191」 [HNOI2007]紧急疏散EVACUATE(最大流

    Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是’.’,那么表示这是一块空地:如果是’X’,那么表示这是一面墙,如果是’D’,那么表示这是一 ...

  2. How to study Watir?

    我在群空间,总是看到很多Watir新手,反复的问:我对元素的定位怎么又出错?我该从哪里着手啊?我给一个我认为最简单方便的学习方法.1. Ruby语法基础要入门,网上有一个不到2M的帮助文档,从头到尾仔 ...

  3. 嵌入式Linux学习方法——给那些彷徨者(下)

    上一章解决了嵌入式Linux的“学什么”问题,这一章则具体来说一下“怎么学”. 只要做好以下3点: 1.学习顺序.学习任何东西都应该由浅入深,不能一口吃下一个大胖子,得循序渐进.很多刚开始想学习Lin ...

  4. jQuery EasyUI Portal 保存拖动位置,仿谷歌DashBoard效果的

    仿照谷歌http://www.google.com/ig?hl=zh-CN中的效果,本文档中包含了拖动后保存位置至Cookie中以及拖动后不保存位置的html文件效果,文档结构

  5. vue中minxin---小记

    定义全局的方法,例如定义过滤器,在很多地方都会用到,就可以定义在minxin中 demo: 数据格式化 保留指定的小数位数 var mixin={ filters:{ fixedNum:functio ...

  6. html marquee 标签(转)

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...

  7. ubuntu下安装vmtool

    这是我遇到这个问题的解决办法-------无法通过vmware的设置安装vmtoll 1.关闭虚拟机2.编辑虚拟机,将CD/DVD选项改成自动检测(而不是之前指向的ubuntuxxx.iso)3.重启 ...

  8. 用grep在子目录中指定的文件类型中查找(转载)

    转自:http://www.ai7.org/wp/html/653.html grep -r abcd *.py 这样的命令得不到你期待的结果,而 grep -r abcd * 这样得到的结果又太多, ...

  9. Thrift 使用TNonblockingServer模型时调用PosixThreadFactory出错。

    Thrift 使用TNonblockingServer模型时调用PosixThreadFactory出错.   我定位到shared_ptr<PosixThreadFactory> thr ...

  10. HDOJ3231醉

    反正一开始就是瞎几把看题,然后题意理解了,什么飞机?只能去看题解了. 呵呵,可惜,题解看了三个小时,还是一知半解,先写了. - -菜鸡超级详细题解,强行掰弯一波,等下再问问别人吧. OK,OK开始!! ...