用getBoundingClientRect()来获取页面元素的位置

以前绝大多数的使用下面的代码来获取页面元素的位置:

var _x = 0, _y = 0;
do {
    _x += el.offsetLeft;
    _y += el.offsetTop;
} while (el = el.offsetParent);
return {x: _x, y: _y};

这里有个”offsetParent”问题,所以要写很多兼容的代码,经过不懈的查找终于找到getBoundingClientRect();该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,他返回的是一个对象,即Object,该对象有是个属性:top,left,right,bottom;这里的top、left和css中的理解很相似,但是right,bottom和css中的理解有点不一样,看示意图:

2008100603035335

2008100603040663

以前getBoundingClientRect()是IE特有的,目前FF3+,opera9.5+,safari 4,都已经支持这个方法。

可以滚动滚动条之后点红色区域看各个值的变化:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Demo</title>

</head>

<body style="width:2000px; height:1000px;">

<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>

<script type="text/javascript">

<span style="white-space: pre;"> </span>document.getElementById('demo').onclick = function() {

if (document.documentElement.getBoundingClientRect) {

alert("left:" + this.getBoundingClientRect().left);

alert("top:" + this.getBoundingClientRect().top);

alert("right:" + this.getBoundingClientRect().right)

alert("bottom:" + this.getBoundingClientRect().bottom);

var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;

var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop;

alert("Demo的位置是X:" + X + ";Y:" + Y)

}

}

</script>

</body>

</html>

有了这个方法,获取页面元素的位置就简单多了,

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

以上图片和代码来自:http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 用getBoundingClientRect()来获取页面元素的位置

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏