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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 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从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python中类的一些方法分析
2014/09/25 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
python在非root权限下的安装方法
2018/01/23 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python贪吃蛇游戏代码
2020/04/18 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python+logging+yaml实现日志分割
2019/07/22 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python实现图像拼接功能
2020/03/23 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
单位活动策划方案
2014/08/17 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL