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 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript中caller和callee详解
Aug 10 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
跟我学习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自定义函数实现代码
2011/12/30 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python中的异常处理简明介绍
2015/04/13 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Python切片操作深入详解
2018/07/27 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python字典排序的方法
2019/10/12 Python
keras之权重初始化方式
2020/05/21 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
清明节随笔
2015/08/15 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书