再说offsetParent offsetLeft offsetTop 的那点事

关于这些可以看这里

http://msdn.microsoft.com/en-us/library/ms534302(VS.85).aspx

­

或者这些

http://www.quirksmode.org/dom/w3c_cssom.html#offsetParent

https://developer.mozilla.org/en/OffsetParent

­

或者以前在博客园写的一点乱七八糟的

http://www.cnblogs.com/qieqing/archive/2008/10/06/1304614.html

­

IE8正式版出来了很久了，今天在修复自己的DrageDrop（拖来拖去的东西），发现IE8的offsetLeft和offsetTop返回的值包括offsetParent的borderLeftWidth和borderTopWidth....噢噢噢，和Opera一样，因为Opera一直都是这样... 对了，这样的话就发现了一直没有注意到的问题，通过offsetLeft和和offsetTop循环来获取元素在页面上的位置问题...

­

如果某元素D在N个定位元素里面，而这些定位元素均存在border的情况，那么最终通过循环获取的值是不是都少了N*border-width呢？额....赶紧修改，在循环中加上offsetParent的border-width对了，刚刚说到IE8和Opera的offsetLeft和offsetTop返回的值是包括offsetParent的borderLeftWidth和borderTopWidth的....恩，这个两个应该排除掉。

­

先不急着修改，说到获取元素的位置又不得不谈到 document.documentElement.getBoundingClientRect ... 噢噢噢噢 扯的不是很远吧，关于 document.documentElement.getBoundingClientRect ，可以先瞧瞧乱七八糟的这里 http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html。

­

目前所知道的支持该方法的是这些：IE FireFox3+ Opera9.5+ 后两者大概是3+ 9.5+具体从哪个版本开始支持也没去测试了...不支持的就是那些低版本的FireFox比如2, Opera比如9.26等，还有Safair和浏览器新力军Chrome(很好，很强大)

­

最后贴一下，

­

var getStyle = function (){

//最终样式，不贴了

}

var getDocumentScroll =  function() {

//获取卷卷卷，不贴了

}

­

var getXY = function() { 
if (document.documentElement.getBoundingClientRect) { // IE,FF3.0+,Opera9.5+ 
  return function(el) { 
   var box = el.getBoundingClientRect(); 
   var rootNode = el.ownerDocument; 
   return [box.left + getDocumentScroll(rootNode)[0], box.top + getDocumentScroll(rootNode)[1]]; 
  }; 
} else { 
  return function(el) { 
   var pos = [el.offsetLeft, el.offsetTop]; 
   var op = el.offsetParent; 
   if (op != el) { 
    if(!!window.opera) { 
     while (op) { 
      pos[0] += op.offsetLeft; 
      pos[1] += op.offsetTop; 
      op = op.offsetParent; 
     } 
    } else { 
     while (op) { 
      pos[0] += op.offsetLeft + parseInt(getStyle(op,'borderLeftWidth')) || 0; 
      pos[1] += op.offsetTop + parseInt(getStyle(op,'borderTopWidth')) || 0; 
      op = op.offsetParent; 
     } 
    } 
   }  return pos; 
  }; 
} 
}