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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
vue 数据操作相关总结
Dec 17 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
mysql5详细安装教程
2007/01/15 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
简单了解python反射机制的一些知识
2019/07/13 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
幼儿园社区活动总结
2014/07/07 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
劳模事迹材料范文
2014/12/24 职场文书
小学生作文评语集锦
2014/12/25 职场文书
初中优秀学生评语
2014/12/29 职场文书
员工评语范文
2014/12/31 职场文书
综合测评自我评价
2015/03/06 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
windows系统安装配置nginx环境
2022/06/28 Servers