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 设计模式学习 Singleton
Jul 27 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
layui表格数据重载
Jul 27 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
token 机制和实现方式
Dec 15 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python回调函数用法实例分析
2015/05/09 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
详解python之heapq模块及排序操作
2019/04/04 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
全国文明单位申报材料
2014/05/31 职场文书
暑期培训心得体会
2014/09/02 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
三方股东合作协议书
2014/10/28 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python