js获得网页中某元素的坐标位置

来源：互联网发布：印度朗洞事件知乎编辑：程序博客网时间：2024/06/04 18:30

当某个元素的父元素进行了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" onclick="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;
}