中最常使用的控件就是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. <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    2. <script type="text/javascript" src="js/common_util.js"></script>
    3. <script type="text/javascript">
    4. function run(){
    5. var loc=com.whuang.hsj.divCoordinate('divObj');
    6. // document.writeln();
    7. 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;
    8. }
    9. </script>