再说offsetParent offsetLeft offsetTop 的那点事
关于这些可以看这里
或者这些
或者以前在博客园写的一点乱七八糟的
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;
};
}
}
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;
};
}
}
