js获取元素坐标

//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 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);

 

js获取对象的绝对坐标 
view plaincopy to clipboardprint
?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    

posted @ 2011-07-13 18:05  周董  阅读(3060)  评论(0)    收藏  举报