js实现获取div坐标的方法


Posted in Javascript onNovember 16, 2015

本文实例讲述了js实现获取div坐标的方法。分享给大家供大家参考,具体如下:

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 
  }
}

js实现获取div坐标的方法

com.whuang.hsj.divCoordinate()方法介绍

功能:返回div坐标;
参数:div对象或div的id(字符串);

返回值:对象,有六个属性:

width:div自身的宽度;
height:div自身的高度;
x:div左上角的坐标x;
y:div左上角的坐标y;
scrollLeft:水平滚动条的位置
scrollTop:竖直滚动条的位置

测试页面:

<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  <script type="text/javascript" src="js/common_util.js"></script>
  <script 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;
    }
  </script>
</head>
<body>
<div style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj" >
</div>
<br>
<input type="button" value="run" onclick="run();" >
<div id="text22" style="width: 400px;" >
  </div>
</body>
</html>

运行结果:

js实现获取div坐标的方法

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

Javascript 相关文章推荐
php中给js数组赋值方法
Mar 10 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
js实现二级联动简单实例
Jan 11 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
跟我学习javascript的闭包
Nov 16 #Javascript
jQuery链式操作实例分析
Nov 16 #Javascript
javascript伸缩型菜单实现代码
Nov 16 #Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 #Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 #Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 #Javascript
实例代码详解jquery.slides.js
Nov 16 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
详解webpack babel的配置
2018/01/09 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Python ORM编程基础示例
2020/02/02 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
公司新员工的演讲稿注意事项
2014/01/01 职场文书
安全教育月活动总结
2014/05/05 职场文书
说明书格式及范文
2014/05/07 职场文书
会计求职信范文
2014/05/24 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
入党函调证明材料
2014/12/24 职场文书
青岛海底世界导游词
2015/02/11 职场文书
党员个人年度总结
2015/02/14 职场文书
婚宴来宾致辞
2015/07/28 职场文书
结婚幸福感言
2015/08/01 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
Golang 字符串的常见操作
2022/04/19 Golang