当某个元素的父元素进行了CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为其父元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript元素坐标</title>
<script type="text/javascript">
function mouse(o) {
//(div)元素的偏离父元素顶部
var dbt=o.offsetTop;
//(div)元素的偏离父元素左边
var dbl=o.offsetLeft;
//(div)元素的宽度
var ofW=o.offsetWidth;
//(div)元素的长度
var ofH=o.offsetHeight;
alert("dbt:"+dbt+" dbl:"+dbl+" ofW:"+ofW+" ofH:"+ofH);
//o.offsetParent 当前元素的父元素
while(o=o.offsetParent)
{
dbl+=o.offsetLeft;
dbt+=o.offsetTop;
}
}
</script>
</head>
<body>
<div id="testDiv" οnclick="mouse(this)" style="background-color:red;width:200px;height:400px">放在我上面</div>
</body>
</html>
//qq空间放在人名上弹出div位置:
function mouse(o) {
var h=132;
var dbt=o.offsetTop;
var dbl=o.offsetLeft;
var ofH=o.offsetHeight;
while(o=o.offsetParent)
{
dbl+=o.offsetLeft;
dbt+=o.offsetTop;
}
var bt=document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
wh=dbwindowHeight();
var b=wh-(dbt-bt)-ofH;
if(b>h) h=dbt+ofH; else h=dbt-h;
// newDiv.style.top = h+"px"; //设置div的位置
// newDiv.style.left = dbl+"px";
alert("h:"+h+" dbl:"+dbl+" dbt:"+dbt);
}
function dbwindowHeight() {
var E = document.documentElement;
return self.innerHeight || (E && E.clientHeight) || document.body.clientHeight;
}