再说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; 
  }; 
} 
}

转载于:https://www.cnblogs.com/qieqing/archive/2009/06/28/1512731.html