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 相关文章推荐
文本框文本自动补全效果示例分享
Jan 19 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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 多维数组排序实现代码
2009/08/05 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP文件操作实例总结
2016/09/27 PHP
Javascript开发包大全整理
2006/12/22 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python异常处理操作实例详解
2018/08/28 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
简单谈谈python基本数据类型
2018/09/26 Python
Django 路由系统URLconf的使用
2018/10/11 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
投标单位介绍信
2014/01/09 职场文书
经典广告词大全
2014/03/14 职场文书
党员干部承诺书范文
2014/03/25 职场文书
财务部绩效考核方案
2014/05/04 职场文书
特教教师先进事迹
2014/05/21 职场文书
公司应聘自荐书
2014/06/14 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python