使用原生js得到页面相关的正确参数

这是一篇总结性质的日志。目的是使用原生js得到页面的总宽度，高度，左上角坐标，鼠标落点的绝对和相对坐标。

需要兼容的浏览器有IE6，IE8，FF4，Chrome 10，Safari 5，Opera 11。

解释一下为什么不测试Chrome，Safari这些浏览器更早的版本。一是因为他们历代版本在这方面改动不大，基本向后兼容。二是，这些浏览器在中国占有率和使用率都太低了。

下面是总结：

目的：得到页面总宽度

document.body.scrollWidth：全部正确

document.documentElement.scrollWidth：全部正确

document.body.clientWidth：全部正确

目的：得到页面总高度

document.body.scrollHeight：除IE外都正确
document.documentElement.scrollHeight：全部正确
document.body.clientHeight：全部正确

看来同一批属性在高度和宽度问题上表现并不一致。

目的：得到窗口宽度

self.innerWidth：除IE系列都正确

document.documentElement.clientWidth：全部正确

目的：得到窗口高度

self.innerHeight

document.documentElement.clientHeight

测试结果同上，第二个全部正确

目的：得到窗口左上角绝对坐标Top

document.body.scrollTop：WebKit内核浏览器正确

document.documentElement.scrollTop：其他内核浏览器正确

这两个属性在所有浏览器里都有定义，只是一个正确另一个恒为0。用Math.max取值即可。

目的：得到窗口左上角绝对坐标Left

document.body.scrollLeft

document.documentElement.scrollLeft

结果同上。

目的：得到鼠标点击坐标相对窗口原点坐标X,Y

这个没什么争议，用event.clientX。

目的：得到鼠标点击坐标相对文档原点坐标X,Y

event.offsetX：除FF，其他都正确

event.pageX：除IE系列，全部正确

---------------------总结分割线-------------------------

page={
document.documentElement.clientWidth,
height:document.documentElement.clientHeight,
totalWidth:document.documentElement.scrollWidth,
totalHeight:document.documentElement.scrollHeight,
top:Math.max(document.body.scrollTop,document.documentElement.scrollTop),
left:Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)
};

也许你发现网上其他类似的测试，得出的结论不太一样。可能其他测试结论种对某些值的检测用了更复杂的条件判断。他们不一定对，也不一定错，而我也只是在我所有的浏览器里做了测试，只保证他们在我的浏览器里值是统一的。

所以，结论仅供参考。

/**
 * 获取元素的坐标点
 * @param elementId 元素Id
 * @returns 元素所在位置的坐标点
 */
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]};  
}