js获取div的坐标

柔光的暖阳◎ 2022-08-14 00:51 299阅读 0赞

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

如何方法可以实现.

Js代码   ![收藏代码][icon_star.png]

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. \}

[![16f46b8e-0414-39b0-84a2-53d133ba5a83.jpg][]][16f46b8e-0414-39b0-84a2-53d133ba5a83.jpg]

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

功能:返回div坐标;

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

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

width:div自身的宽度;

height:div自身的高度;

x:div左上角的坐标x;

y:div左上角的坐标y;

scrollLeft:水平滚动条的位置

scrollTop:竖直滚动条的位置

测试页面:

Html代码   ![收藏代码][icon_star.png]

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****>**

运行结果:  
![a82a49c1-8da5-391f-a487-d908255c9691.jpg][]

参考:

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

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

[![041405283617635.gif][]][041405283617635.gif 1]

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

[icon_star.png]: /images/20220810/ab0d0294c1ee46bbbd6148e217a27a53.png
[16f46b8e-0414-39b0-84a2-53d133ba5a83.jpg]: /images/20220810/56816daade664a62a23a25a47dc90f6c.png
[a82a49c1-8da5-391f-a487-d908255c9691.jpg]: /images/20220810/c3ae40ca14444c67a6dca831b6baa41d.png
[041405283617635.gif]: /images/20220810/e5197f7638d74bdeb8fb3b53ad0d95c2.png
[041405283617635.gif 1]: http://www.itmmd.com/boke.html
[IT]: http://www.itmmd.com