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 相关文章推荐
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
js+html5生成自动排列对话框实例
Oct 09 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
js同源策略详解
2015/05/21 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
深入理解ES6中let和闭包
2018/02/22 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
教师工作决心书
2015/02/04 职场文书
班主任自我评价范文
2015/03/11 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers