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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 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中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
分享6个隐藏的python功能
2017/12/07 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python函数与方法的区别总结
2019/06/23 Python
Python3 读取Word文件方式
2020/02/13 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
专升本个人自我评价
2013/12/22 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
机关办公室岗位职责
2014/04/16 职场文书
计算机专业自荐信
2014/05/24 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
python 实现图片特效处理
2022/04/03 Python