html如何找坐标,js获取html网页中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};

}

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

功能:返回div坐标;

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

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

width:div自身的宽度;

height:div自身的高度;

x:div左上角的坐标x;

y:div左上角的坐标y;

scrollLeft:水平滚动条的位置

scrollTop:竖直滚动条的位置

测试页面:

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;

}

运行效果: