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 相关文章推荐
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
理解AngularJs指令
2015/12/10 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
护士思想汇报
2014/01/12 职场文书
关于工资低的辞职信
2014/01/14 职场文书
新春寄语大全
2014/04/09 职场文书
房地产推广策划方案
2014/05/19 职场文书
团组织推优材料
2014/12/29 职场文书
党员个人总结范文
2015/02/14 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server