获取页面某一元素的绝对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. [Selenium] 搭建 Android WebDriver 环境

    1.安装 Android SDK 到如下网址下载 Android SDK http://developer.android.com/sdk/index.html 2.创建 Android 虚拟设备 解 ...

  2. angularJS ng-bind用法

    ng-bind 指令绑定控制器函数 函数名() 到 标签里面 ; ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定; ...

  3. c++中static的全部用法

    要理解static,就必须要先理解另一个与之相对的关键字,很多人可能都还不知道有这个关键字,那就是auto,其实我们通常声明的不用static修饰的变量,都是auto的,因为它是默认的,就象short ...

  4. 【重要】Selenium2+python自动化44-元素定位参数化(find_element)

    转:https://www.cnblogs.com/yoyoketang/p/6551274.html 前言 元素定位有八种方法,这个能看到这一篇的小伙伴都知道了,那么有没有一种方法,可以把八种定位合 ...

  5. Cocoapods fatal: Remote branch #{s.version} not found in upstream origin

    遇到一个错误: fatal: Remote branch #{s.version} not found in upstream origin 解决办法 网上搜了很多,都无效 可能仅适用我的情况,分享出 ...

  6. CodeForces 13C【DP】

    题意: 给你n个数,每次只能让一个数+1,或者-1,目标是最终使这个序列构成一个非递减的序列: n是5e3,复杂度n^2内.值是1e9: 思路: 可以发现子结构是保证一个区间的非递减, 如果只是dp[ ...

  7. poj2239 poj1274【二分匹配】

    题意: 就是尽可能的选多的课 思路: 把课程和上课的时间看作二分图 跑一跑二分匹配就好了 #include<iostream> #include<cstdio> #includ ...

  8. 如何让Android微博个人详情页滚动到顶部

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/103 个人详情页滑动到顶部 最近产品提了个新需求,需要实现 ...

  9. AForge.net简介和认识

    AForge.NET是一个专门为开发者和研究者基于C#框架设计的,他包括计算机视觉与人工智能,图像处理,神经网络,遗传算法,机器学习,模糊系统,机器人控制等领域.这个框架由一系列的类库组成.主要包括有 ...

  10. nginx媒体类型

    在服务器的响应头中,有Content-Type一行,表明传输的http媒体类型. 比如:txt文件就用text/plain 表明. conf/mime.type types { text/html h ...