元素的offsetParent可能值:null,body元素,该元素的某个父级定位元素。
为null的情况:
1. body元素
2. 元素的display为none
3. 元素尚未添加到DOM
4. 元素的position为fixed
为body元素的情况:
该元素不是任何一个定位元素的后代,也不是null。
为某个父级定位元素的情况:
如果此元素是某个定位元素的子级,离它最近的父级定位元素为此元素的offsetParent;如果此元素不是某个定位元素的子级,但其父元素中有td、th或者table,那么其offsetParent为上述元素。
获取元素相对于页面的位置:
function(elem) {
if (elem.getBoundingClientRect) { //HTML5 method
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { y: Math.round(top), x: Math.round(left), width:elem.offsetWidth, height:elem.offsetHeight };
} else { //fallback to naive approach
var top=0, left=0;
while(elem) {
top = top + parseInt(elem.offsetTop,10);
left = left + parseInt(elem.offsetLeft,10);
elem = elem.offsetParent;
}
return { y: top, x: left, width:elem.offsetHeight, height:elem.offsetWidth };
}
}