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 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
使用AOP改善javascript代码
May 01 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
React 高阶组件HOC用法归纳
Jun 13 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
下载文件的点击数回填
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python类型强制转换long to int的代码
2013/02/10 Python
python一键升级所有pip package的方法
2017/01/16 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
大学自我鉴定
2013/12/20 职场文书
协议书范本
2014/04/23 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
初中重阳节活动总结
2015/05/05 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers