得到object的绝对位置

在以前的项目中,我们是用不断迭代obj的父对像的offsetLeft/Top位置来得到其绝对位置的,今天在看到个优美得让我蛋痛的写法:

  obj.getBoundingClientRect()

在网上查一下相关的资料,这么臭屁的东西居然是在ie里最早实现的!!!然后在opera 9.5+和FF3.0+里也得到了支持,感谢Microsoft大神呀!

下面是让我蛋痛的老写法(又臭又长,无比丑陋):

function getAbsOffset(obj, offsetObj){
	var offsetObj = offsetObj || document;
	var curPos = {
		x: 0,
		y: 0
	};
	if (obj.offsetParent) {
		while (obj.offsetParent && obj != offsetObj) {
			curPos.x += obj.offsetLeft - obj.scrollLeft;
			curPos.y += obj.offsetTop - obj.scrollTop;
			obj = obj.offsetParent;
		}
	} else if (obj.x) {
		curPos.x += obj.offsetLeft - obj.scrollLeft;
		curPos.y += obj.offsetTop - obj.scrollTop;
	}
	return curPos;
}

在FF 3.6里实验,只需这么一句:obj.getBoundingClientRect(),可爱的firebug输出如下信息:

{
	bottom:289,
	height:17,
	left:534,
	right:569,
	top:272,
	width:35,
	constructor:ClientRect{...}
}

长宽高等信息全齐活啦。

关于 江波

UI设计师、关注前端及交互技术,期望能做出创造性的产品!
此条目发表在 技术八卦 分类目录,贴了 , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>