JavaScript 获取div在页面中坐标

2019-4-15 23:50| 作者: antzone| 查看: 2286| 评论: 0|来自: 蚂蚁部落

本章节通过代码实例介绍一下如何获取一个元素在页面中的位置。

下面的代码是以div为例,对于其他的元素也是如此。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
  padding:0px;
  margin:0px;
}
#thediv{
  width:100px;
  height:125px;
  margin:200px;
  background:green;
  text-align:center;
  font-size:12px;
  line-height:125px;
}
</style> 
<script type="text/javascript">  
function getIE(e,show){
  var t=e.offsetTop;
  var l=e.offsetLeft;
  while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
  }
  show.innerHTML="top="+t+"/nleft="+l;
}
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var oshow=document.getElementById("show");
  getIE(odiv,oshow)
}
</script>
</head>
<body>
<div id="show">蚂蚁部落</div>
<div id="thediv">蚂蚁部落</div>
</body>
</html>

以上代码实现了我们的要求,能够获取div在页面中的位置,下面简单介绍一下它的实现过程。

一.代码注释:

(1).function getIE(e,show){},此函数可以获取响应对象在页面黄总的位置,并将位置显示在指定元素中,第一个参数是要获取位置的元素对象,第二个参数是显示位置的元素对象。

(2).var t=e.offsetTop,返回元素距离最近定位父级元素顶部的距离,如果父级中没有定位元素,则返回距离body顶端的距离。

(3).var l=e.offsetLeft,返回元素距离最近定位父级元素左部的距离,如果父级中没有定位元素,则返回距离body左端的距离。

(4).while(e=e.offsetParent){

    t+=e.offsetTop;

    l+=e.offsetLeft;

}

上面的循环语句非常的重要,因为有可能元素是被多层嵌套的,所以相关距离需要进行叠加。

(5).show.innerHTML="top="+t+"/nleft="+l,将位置数据写入指定对象。

二.相关阅读:

(1).offsetTop属性参阅JavaScript offsetTop一章节。

(2).offsetParent属性参阅JavaScript offsetParent一章节。  


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部