首页 > 代码库 > js获取div的坐标

js获取div的坐标

2024-08-02 08:36:50   221人阅读

html中最常使用的控件就是div了,那么如何获取div的坐标呢?

如何方法可以实现.

Js代码  收藏代码
  1. /*** 
  2.  * 获取div的坐标 
  3.  * @param divObj 
  4.  * @returns {{width: number, height: number, left: *, top: Window}} 
  5.  */  
  6. com.whuang.hsj.divCoordinate=function(divObj){  
  7.     if(typeof divObj == ‘string‘){  
  8.         divObj=com.whuang.hsj.$$id(‘divObj‘);  
  9.     }  
  10.     return {‘width‘:divObj.offsetWidth,‘height‘:divObj.offsetHeight,  
  11.         ‘x‘:divObj.offsetLeft,‘y‘:divObj.offsetTop,  
  12.         ‘scrollLeft‘:com.whuang.hsj.getScroll().left,‘scrollTop‘:com.whuang.hsj.getScroll().top};  
  13. }  
  14. // Cross browser gets the position of scroll  
  15. com.whuang.hsj.getScroll=function(){  
  16.     return {  
  17.         top:document.documentElement.scrollTop || document.body.scrollTop,  
  18.         left:document.documentElement.scrollLeft || document.body.scrollLeft  
  19.     }  
  20. }  

 

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

功能:返回div坐标;

参数:div对象或div的id(字符串);

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

width:div自身的宽度;

height:div自身的高度;

x:div左上角的坐标x;

y:div左上角的坐标y;

scrollLeft:水平滚动条的位置

scrollTop:竖直滚动条的位置

测试页面:

Html代码  收藏代码
  1. <html>  
  2. <head lang="en">  
  3.     <meta charset="UTF-8">  
  4.     <title></title>  
  5.     <script type="text/javascript" src="js/jquery-1.10.1.js"></script>  
  6.     <script type="text/javascript" src="js/common_util.js"></script>  
  7.     <script type="text/javascript">  
  8.   
  9.   
  10.           
  11.     function run(){  
  12.             var loc=com.whuang.hsj.divCoordinate(‘divObj‘);  
  13. //            document.writeln();  
  14.             com.whuang.hsj.$$id(‘text22‘).innerHTML="width:"+loc.width+" &nbsp; , &nbsp; height:"+loc.height+" &nbsp;, &nbsp;scrollTop:"+loc.scrollTop+" &nbsp;, &nbsp;scrollLeft:"+loc.scrollLeft+" &nbsp;,&nbsp;x:"+loc.x+" &nbsp;,&nbsp; y:"+loc.y;  
  15.         }  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. <div style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj"  >  
  21.   
  22. </div>  
  23. <br>  
  24. <input type="button" value="run" onclick="run();" >  
  25. <div  id="text22" style="width: 400px;" >  
  26.     </div>  
  27. </body>  
  28. </html>  

 运行结果:

 

参考:

http://hw1287789687.iteye.com/admin/blogs/2156296

http://hw1287789687.iteye.com/admin/blogs/2155772

欢迎大家访问我的个人网站 萌萌的IT人

js获取div的坐标


联系
我们