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 UI的拖拽功能实现方法小结
Mar 14 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
详解jQuery中的事件
Dec 14 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
ant design charts 获取后端接口数据展示
May 25 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中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python 如何批量更新已安装的库
2020/05/26 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
C语言笔试题回忆
2015/04/02 面试题
商务考察邀请函范文
2014/01/21 职场文书
妇产医师自荐信
2014/01/29 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Vue和Flask通信的实现
2021/05/19 Vue.js