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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
通过url查找a元素并点击
Apr 09 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 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
SMARTY学习手记
2007/01/04 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python实现数据库编程方法详解
2015/06/09 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python-地图可视化组件folium的操作
2020/12/14 Python
写演讲稿要注意的六件事
2014/01/14 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
聚会通知怎么写
2015/04/23 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers