js获取元素坐标完整示例

发布时间:2019-08-23编辑:脚本学堂
分享一个js获取元素坐标的代码,可以获取IE、Firefox等浏览器下的元素坐标,有需要的朋友参考下。

例子,获取元素坐标。
代码:
 

复制代码 代码示例:
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]}; 

调用,取得元素坐标位置:
 

复制代码 代码示例:
var pos=getElementPos("divId"); 
alert("距左边距离"+ pos.x +",距上边距离"+pos.y);