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 分栏效果实现代码
Aug 29 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
bootstrap实现tab选项卡切换
Aug 09 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
main.php
2006/12/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
javascript 写类方式之一
2009/07/05 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python flask实现分页的示例代码
2018/08/02 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
英语教师求职信范文
2015/03/20 职场文书
矛盾论读书笔记
2015/06/29 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers