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 居中漂浮广告
Mar 21 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
js的延迟执行问题分析
Jun 23 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
理解javascript中的闭包
Jan 11 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 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
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php中fsockopen用法实例
2015/01/05 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JS delegate与live浅析
2013/12/21 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
linux面试题参考答案(4)
2014/09/21 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
求职简历自荐信范文
2013/10/21 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
暑期研修感言
2014/02/17 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
优秀高中学生评语
2014/12/30 职场文书
超市采购员岗位职责
2015/04/07 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
python ansible自动化运维工具执行流程
2021/06/24 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js