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


Posted in Javascript onNovember 25, 2010

document.documentElement.getBoundingClientRect

下面这是MSDN的解释:

Syntax

oRect = object.getBoundingClientRect()

Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.


 

还是实际解释下,该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。也不好理解,下面用图说明下。

该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

 

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

 

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

 

下面的代码举了个简单的例子,可以滚动滚动条之后点红色区域看各个值的变化。

<!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> 
</body> 
</html> 
<script> 
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>

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

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

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
Node.js文件操作详解
Aug 16 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 #Javascript
js删除所有的cookie的代码
Nov 25 #Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 #Javascript
js页面跳转常用的几种方式
Nov 25 #Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 #Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 #Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 #Javascript
You might like
杏林同学录(四)
2006/10/09 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python内存管理实例分析
2019/07/10 Python
python之拟合的实现
2019/07/19 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
学校大课间活动方案
2014/01/30 职场文书
女子职高个人自荐书
2014/02/01 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
还款承诺书范本
2015/01/20 职场文书
安阳殷墟导游词
2015/02/10 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL