注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

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

2010-12-08 22:10:12|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

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

用getBoundingClientRect()来获取页面元素的位置 - 郭培 - 前端工程师 郭培的博客

 

用getBoundingClientRect()来获取页面元素的位置 - 郭培 - 前端工程师 郭培的博客

 以前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=gbk" />
<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>
<span style="white-space: pre;"> </span>
<script type="text/javascript">
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

  评论这张
 
阅读(644)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017