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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
?生?D片??C字串
2006/12/06 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
node后端服务保活的实现
2019/11/10 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python实现Adapter模式实例代码
2018/02/09 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
物业招聘计划书
2014/01/10 职场文书
总经理助理工作职责
2014/02/06 职场文书
高二语文教学反思
2016/02/16 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js