`
tianke66
  • 浏览: 187946 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

js获取坐标

阅读更多

function getElementPos(elementId) {
 
var ua = navigator.userAgent.toLowerCase();
 
var isOpera = (ua.indexOf('opera'!= -1);
 
var isIE = (ua.indexOf('msie'!= -1 && !isOpera); // not opera spoof
 var el = document.getElementById(elementId);
 
if(el.parentNode === null || el.style.display == 'none') {
  
return false;
 }      
 
var parent = null;
 
var pos = [];     
 
var box;     
 
if(el.getBoundingClientRect)    //IE
 {         
  box 
= el.getBoundingClientRect();
  
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  
return {x:box.left + scrollLeft, y:box.top + scrollTop};
 }
else if(document.getBoxObjectFor)    // gecko    
 {
  box 
= document.getBoxObjectFor(el); 
  
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0
  
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0
  pos 
= [box.x - borderLeft, box.y - borderTop];
 } 
else    // safari & opera    
 {
  pos 
= [el.offsetLeft, el.offsetTop];  
  parent 
= el.offsetParent;     
  
if (parent != el) { 
   
while (parent) {  
    pos[
0+= parent.offsetLeft; 
    pos[
1+= parent.offsetTop; 
    parent 
= parent.offsetParent;
   }  
  }   
  
if (ua.indexOf('opera'!= -1 || ( ua.indexOf('safari'!= -1 && el.style.position == 'absolute' )) { 
   pos[
0-= document.body.offsetLeft;
   pos[
1-= document.body.offsetTop;         
  }    
 }              
 
if (el.parentNode) { 
    parent 
= el.parentNode;
   } 
else {
    parent 
= null;
   }
 
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
  pos[0-= parent.scrollLeft;
  pos[
1-= parent.scrollTop;
  
if (parent.parentNode) {
   parent 
= parent.parentNode;
  } 
else {
   parent 
= null;
  }
 }
 
return {x:pos[0], y:pos[1]};
}

//sample
var pos=getElementPos("divId");
alert(
"距左边距离"+ pos.x +",距上边距离"+pos.y);

 

 

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  

分享到:
评论

相关推荐

    js资料大综合(js浮动,js获取坐标)

    在给定的“js资料大综合(js浮动,js获取坐标)”中,我们可以深入探讨两个关键知识点:js浮动和js获取坐标。 一、JS浮动 在网页设计中,“浮动”通常指的是CSS中的`float`属性,它允许元素在容器内左右移动,以...

    js获取页面控件坐标.pdf

    JS 获取页面控件坐标 在 HTML 文档中,获取页面控件坐标是非常重要的,特别是在进行交互式开发时。今天,我们将讨论如何使用 JavaScript 获取页面控件坐标。 在 HTML 文档中,每个元素都有其自己的坐标系,通过...

    pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_

    `pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_`这个项目就是针对这一需求而设计的,它利用了PDF.js库来实现PDF文档的关键字坐标获取功能。 PDF.js是Mozilla开发的一个开源JavaScript库,用于在Web浏览器...

    javascript中获取坐标的参数

    javascript中获取坐标的参数javascript中获取坐标的参数javascript中获取坐标的参数javascript中获取坐标的参数

    JavaScript应用实例-click控件获取坐标位置.js

    JavaScript应用实例-click控件获取坐标位置.js

    js腾讯地图api获取坐标定位地理位置_soso地图api获取坐标

    在IT行业中,JavaScript(简称js...在JavaScript中使用腾讯地图API获取坐标定位地理位置,首先需要在HTML中引入腾讯地图的JavaScript库。这通常通过在标签内添加一个标签完成,指定腾讯地图的CDN链接。例如: ```html ...

    JS点击百度地图获取坐标代码.zip

    这个"JS点击百度地图获取坐标代码.zip"文件包含了一个基本示例,通过`index.html`文件展示了如何实现这一功能。下面我们将深入探讨相关知识点。 1. **百度地图API** 百度地图API是百度提供的一套JavaScript接口,...

    openlayers点击获取坐标Demo

    这个Demo的目的是帮助开发者理解如何在OpenLayers 3中集成点击获取坐标的功能,这对于开发基于地理位置的应用程序至关重要。你可以根据实际需求调整代码,例如添加坐标显示、标记点等功能。通过深入学习OpenLayers的...

    javascript获得对象的坐标

    3. **动态变化**:如果页面中的元素位置会随着用户操作而改变,那么在获取坐标时需要确保页面已经完成渲染并稳定下来。 ### 结论 通过上述介绍,我们可以看到,使用JavaScript获取页面元素坐标的方法有多种,每种...

    js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    本知识点将详细介绍如何通过JavaScript获取鼠标的坐标位置。JavaScript是一种广泛应用于网页前端的脚本语言,它能够实现各种浏览器事件处理,包括鼠标事件。 首先,需要了解的是鼠标事件。在鼠标事件中,常见的如`...

    js腾讯地图api获取坐标位置.zip

    【JS腾讯地图API获取坐标位置】是利用JavaScript编程语言与腾讯地图API进行交互,实现获取用户当前位置的功能。在Web开发中,这样的功能常用于提供基于地理位置的服务,如导航、附近搜索等。以下将详细介绍相关知识...

    javascript获得鼠标的坐标值

    在JavaScript中,获取鼠标的坐标值是一项常见的任务,它在用户交互和动态界面设计中扮演着重要角色。根据描述,我们将讨论两种不同的场景来获取这些坐标:一是相对于`body`元素,二是相对于某个特定的对象。 ### 1....

    百度地图api获取坐标

    **标题:“百度地图API获取坐标”** 在现代的Web开发中,地理位置信息的获取与处理是不可或缺的一部分。百度地图API(Application Programming Interface)为开发者提供了一种强大的工具,能够帮助我们轻松地在网页...

    js实现获取div坐标的方法

    在本文中,我们将深入探讨如何使用JavaScript来获取页面中div元素的坐标。这是一项基础且实用的技术,在Web开发中经常会用到,尤其是在进行DOM操作、实现自定义的交互效果或开发动画时,获取元素的位置信息是必不可...

    three.js 3d坐标转平面坐标

    在3D图形编程中,Three.js是一个非常流行的JavaScript库,用于在Web浏览器中创建和展示三维模型和场景。本教程将深入探讨如何在Three.js环境中将3D坐标转换为2D(平面)坐标,以便在网页上的div元素或其他2D元素上...

    yantubbs-获取坐标

    在IT行业中,获取坐标通常指的是在各种应用或系统中定位特定元素或对象的位置信息。坐标系统可以应用于多种场景,如地图应用、游戏开发、图像处理、网页交互等。"yantubbs-获取坐标"可能是指一个特定的项目或者工具...

    AutoJs源码-click控件获取坐标位置

    AutoJs源码-click控件获取坐标位置。本资源购买前提醒:本源码都是实际autojs项目模板,安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您...

    Javascript获取鼠标坐标的各种类型

    JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...

    js地理坐标与屏幕坐标互转换

    在ArcGIS JavaScript API中,地理坐标与屏幕坐标的相互转换是一项重要的功能,它允许开发者将地图上的地理位置(经纬度)转换为用户界面中的像素位置,反之亦然。这对于实现地图交互、绘制图形以及进行空间分析等...

Global site tag (gtag.js) - Google Analytics