js获取div的坐标

页面导航:首页 > 网络编程 > JavaScript > js获取div的坐标

js获取div的坐标

来源: 作者: 时间:2016-02-05 11:06 【

html中最常使用的控件就是div了,那么如何获取div的坐标呢?如何方法可以实现 Js代码 *** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, lef

中最常使用的控件就是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>

  • 运行结果:
    \

    参考:

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

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

    欢迎大家访问我的个人网站 萌萌的IT人
  • Tags:
    复制链接发给好友 收藏 打印 关闭 返回首页
    本文链接:http://www.js-code.com/JavaScript/2016020549443.html

    相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <