javascript 获取元素位置的快速方法 getBoundingClientRect()


Posted in Javascript onNovember 26, 2009

它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。
所以,网页元素的相对位置就是

var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;
再加上滚动距离,就可以得到绝对位置

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。

Javascript 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 #Javascript
Ext grid 添加右击菜单
Nov 26 #Javascript
JS 判断undefined的实现代码
Nov 26 #Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 #Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 #Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 #Javascript
文本框的字数限制功能jquery插件
Nov 24 #Javascript
You might like
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
Git命令之分支详解
2021/03/02 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python itertools模块详解
2015/05/09 Python
Python max内置函数详细介绍
2016/11/17 Python
python实现图片识别汽车功能
2018/11/30 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python