html部分:
<div id='divId' style="left: 150px; top: 280px; width: 100px; height: 100px;
background: none; text-align: center">
</div>
js部分:
var obj = document.getElementById('divId');
var x = GetObjPos(obj)['x'];
var y = GetObjPos(obj)['y'];
var width = parseInt(obj.style.width);
var height = parseInt(obj.style.height);
/**
* 坐标
* @param x
* @param y
* @return
*/
function CPos(x, y) {
this.x = x;
this.y = y;
}
/**
* 得到对象的相对浏览器的坐标
* @param ATarget
* @return
*/
function GetObjPos(ATarget) {
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target) {
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
这里要注意的是:获取div必须使用id,并且用原生js,才有效,使用class或者jq的方法都无效。
原因是*.style.width和obj.style.height要通过id才能捕捉,而这种方法只有原生js才能使用。
网友评论