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单例模式的两种方案
Oct 22 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
深入理解js promise chain
May 05 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
详解React中setState回调函数
Jun 14 Javascript
js实现炫酷光感效果
Sep 05 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
腾讯的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
PHP STRING 陷阱原理说明
2010/07/24 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
详解python tcp编程
2020/08/24 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python os.rename实例用法详解
2020/12/06 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
员工拓展培训方案
2014/02/15 职场文书
介绍信的写法
2015/01/31 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
小学校长开学致辞
2015/07/29 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers