欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

怎么样在js中实现获取div坐标

来源:本站整理 作者:佚名 时间:2016-03-03 TAG: 我要投稿

html中最常使用的控件就是div了,那么如何获取div的坐标呢?
如下方法可以实现:
/***
 * 获取div的坐标
 * @param divObj
 * @returns {{width: number, height: number, left: *, top: Window}}
 */
com.whuang.hsj.divCoordinate=function(divObj){
 if(typeof divObj == 'string'){
  divObj=com.whuang.hsj.$$id('divObj');
 }
 return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,
  'x':divObj.offsetLeft,'y':divObj.offsetTop,
  'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};
}
// Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
 return {
  top:document.documentElement.scrollTop || document.body.scrollTop,
  left:document.documentElement.scrollLeft || document.body.scrollLeft
 }
}

com.whuang.hsj.divCoordinate()方法介绍
功能:返回div坐标;
参数:div对象或div的id(字符串);
返回值:对象,有六个属性:
width:div自身的宽度;
height:div自身的高度;
x:div左上角的坐标x;
y:div左上角的坐标y;
scrollLeft:水平滚动条的位置
scrollTop:竖直滚动条的位置
测试页面:
 lang="en">
  charset="UTF-8">
 
  type="text/javascript" src="js/jquery-1.10.1.js">
  type="text/javascript" src="js/common_util.js">
  type="text/javascript">
 function run(){
   var loc=com.whuang.hsj.divCoordinate('divObj');
//   document.writeln();
   com.whuang.hsj.$$id('text22').innerHTML="width:"+loc.width+" , height:"+loc.height+" , scrollTop:"+loc.scrollTop+" , scrollLeft:"+loc.scrollLeft+" ,x:"+loc.x+" , y:"+loc.y;
  }
 
 style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj" >
 type="button" value="run" onclick="run();" >
 id="text22" style="width: 400px;" >
 
运行结果:

希望本文所述对大家JavaScript程序设计有所帮助。
 

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载