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 相关文章推荐
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python实现计算器功能
2019/10/31 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js