`
tianke66
  • 浏览: 182920 次
  • 性别: 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  

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics