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 iframe编程相关代码
Dec 28 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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版
2012/04/20 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Python open读写文件实现脚本
2008/09/06 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python移位运算的实现
2019/07/15 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
公司领导推荐信
2013/11/12 职场文书
工作人员思想汇报
2014/01/09 职场文书
家长给老师的道歉信
2014/01/13 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
Spring实现内置监听器
2021/07/09 Java/Android
浅析python中特殊文件和特殊函数
2022/02/24 Python