js实现获取div坐标的方法
本文实例讲述了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
}
}
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>
运行结果:
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍使用js获取鼠标坐标相关面试题，主要包含被问及使用js获取鼠标坐标时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍JS网页在线获取鼠标坐标值的方法，包括了JS网页在线获取鼠标坐标值的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS网页在线获取鼠标坐标值的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js使用onmousemove和onmouseout获取鼠标坐标的方法，包括了js使用onmousemove和onmouseout获取鼠标坐标的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法。分享给大家供大家参考。具体如下： 下面的js代码演示了onmousemove和onmouseout事件的用法，
-
我试图在父div内获得可拖动div的左上角的坐标。我可以在父div中获取鼠标的坐标，这是通过一个标签完成的。我想知道是否有任何类似的标记，例如来获取div的坐标 我使用标签，但它不起作用。
-
本文向大家介绍javascript获取当前鼠标坐标的方法，包括了javascript获取当前鼠标坐标的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下： 对于javascript获取当前鼠标坐标来说，得对不同浏览器的坐标位置有所了解。具体代码如下： 希望本文所述对大家的javascript程序设计有所帮助
-
本文向大家介绍js实现div弹出层的方法，包括了js实现div弹出层的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下： 话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西，下面来给各位分享一个原生太js div弹出层实例，有需要的朋友可一起看看。 这个不用多说了,直接