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 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
再谈javascript原型继承
Nov 10 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
js检测用户输入密码强度
Oct 22 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
JavaScript实现简单动态表格
Dec 02 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知识收集
2012/08/20 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
查询json的数据结构的8种方式简介
2014/03/10 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python 如何创建一个线程池
2020/07/28 Python
python切割图片的示例
2020/11/12 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
运动会解说词100字
2014/01/31 职场文书
南京青奥会口号
2014/06/12 职场文书
领导干部作风建设总结
2014/10/23 职场文书
五一劳动节慰问信
2015/02/14 职场文书
感恩的心主题班会
2015/08/12 职场文书
服务行业标语口号
2015/12/26 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
MySQL数据库事务的四大特性
2022/04/20 MySQL