1.js获取对象的绝对坐标 方法1:

function   getAbsPoint(e)
{
var x = e.offsetLeft, y = e.offsetTop;
while(e=e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:"+x+","+"y:"+y);
}

方法2:

function   getAbsPoint(obj)
{
  var x,y;
  oRect = obj.getBoundingClientRect();
  x=oRect.left;
  y=oRect.top;
  alert("("+x+","+y+")")
}

JS中获得窗口属性的方法
1。获得屏幕的分辨率:

screen.width
screen.height

2。获得窗口大小:

document.body.clientWidth
document.body.clientHeight

3。获得窗口大小(包含Border、Scroll等元素)

document.body.offsetWidth
document.body.offsetHeight
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
function getScreen(e) {
var x = e.screenX - e.clientX;
var y = e.screenY - e.clientY;
alert("X坐标:" + x + ",Y坐标:" + y);
}
</script>
</head>
<body>
<input type="button" onclick="getScreen(event)" value="测试" />
</body>
</html>

JS获取坐标的更多相关文章

  1. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

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

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

  3. js点击获取—通过JS获取图片的绝对对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示:  <!DOCTYPE html> <html lang="en"> <head> ...

  4. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  5. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

  6. js获取元素的页面坐标

    一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+borde ...

  7. js获取移动端触摸坐标

    想在touchmove事件里监听手指按下的坐标,event.pageX获取的是undefined,changedTouches,targetTouches,touches也只获得到了鼠标按下时的坐标, ...

  8. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  9. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

随机推荐

  1. 【转】C++四种类型转换方式

    C++四种类型转换方式 https://blog.csdn.net/lv_amelia/article/details/79483579 C风格的强制类型转换(Type Case)很简单,不管什么类型 ...

  2. [转]skynet Lua中的协程

    Lua中的协程 http://www.outsky.org/code/lua-coroutine.html Sep 6, 2014 Lua中的协程和其他变量一样,都是第一类值(first-class ...

  3. py解释器PC

    pycharm激活方法: 今天更新了一下pycharm,结果之前的激活就不能用了,下面是激活方法: 1.mac下在终端进入etc目录: cd /etc 2.编辑hosts文件: vi hosts 将“ ...

  4. 【leetcode】9-PalindromeNumber

    problem Palindrome Number 回文数字: 什么是回文数字? 要求不能使用字符串: 翻转一半的数字: 如何判断数字到一半啦? 参考 1.leetcode-problem: 完

  5. WEBBASE篇: 第一篇, HTML知识1

    HTML知识1 1,web概述 WEB就是互联网上的一种应用程序 - 网页程序: 程序结构: (1)C / S: C:Client 客户端:S:Server 服务器: (2)B / S: B:Brow ...

  6. Angular 组件

    1 2 change是TimepickerDemoCtrl上的,mytime在timepicker内部改变生效就会触发 3 timepicker内部绑定TimepickerDemoCtrl对值的监控 ...

  7. SQLI DUMB SERIES-3

    less3 输入?id=1' 说明输入的id旁边加了单引号和括号('id'),直接在1后面加入“ ') ”,闭合前面的单引号和括号. 方法同less1相同. 例如:查询PHP版本和数据库名字 ?id= ...

  8. 博客 first

    2016.10.28 这会是一个值得纪念的日子,我将会从此刻开始,1~2天不间断的更新我再软件,编程方面的学习历程和在大学的琐事. 希望N年后看到,能够回味. a good memery....... ...

  9. java-类与类,类与接口,接口与接口的关系

    1.类与类: - 继承关系,只能单继承,可以多层继承. 2.类与接口: - 实现关系,可以单实现,也可以多实现. - 并且还可以在继承一个类的同时实现多个接口. - * 例:class Demo ex ...

  10. 取消svn关联文件夹

    svn没有自带取消svn关联功能,所以我们需要以下脚本 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classe ...