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 相关文章推荐
js实现简单登录功能的实例代码
Nov 09 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
详细分析Node.js 模块系统
Jun 28 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 第一节 php简介
2012/04/28 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php文件上传简单实现方法
2015/01/24 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
了解重排与重绘
2019/05/29 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
pycharm安装图文教程
2017/05/02 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
如何通过命令行进入python
2020/07/06 Python
Python通过字典映射函数实现switch
2020/11/06 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
老人祝寿主持词
2014/03/28 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
完美的中文自荐信
2014/05/24 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js