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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
vue项目中微信登录的实现操作
Sep 08 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Ruby元编程基础学习笔记整理
2016/07/02 Python
python 日期操作类代码
2018/05/05 Python
PyCharm代码格式调整方法
2018/05/23 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python 日志 logging模块详细解析
2020/03/31 Python
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
怎样填写就业意向
2014/04/02 职场文书
村干部培训方案
2014/05/02 职场文书
项目合作协议书
2014/09/23 职场文书
田径运动会通讯稿
2015/07/18 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
create-react-app开发常用配置教程
2022/06/25 Javascript