获取元素距离浏览器周边的位置的方法getBoundingClientRect


Posted in Javascript onApril 17, 2013
var box = document.getElementById( "gaga1" ); 
/* alert( box.getBoundingClientRect().top ); 
alert( box.getBoundingClientRect().right ); 
alert( box.getBoundingClientRect().bottom ); 
alert( box.getBoundingClientRect().left ) */ function getRect( elements ){ 
var rect = elements.getBoundingClientRect(); 
var clientTop = document.documentElement.clientTop; 
var clientLeft = document.documentElement.clientLeft; 
return { // 兼容ie多出的两个px 
top : rect.top - clientTop, // 距离顶部的位置 
bottom : rect.bottom - clientTop, // 距离顶部加上元素本身的高度就等于bottom的位置 
left : rect.left - clientLeft, // 距离左边的位置 
right : rect.right - clientLeft // 距离右边的位置就是 距离左边的位置加上元素本身的宽度 
}; 
}; 
alert( getRect(box).top )
Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
动态加载js和css(外部文件)
Apr 17 #Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 #Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 #Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 #Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 #Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 #Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 #Javascript
You might like
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
一个实用的php验证码类
2017/07/06 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python和Sublime整合过程图示
2019/12/25 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python有几个版本
2020/06/17 Python
详解KMP算法以及python如何实现
2020/09/18 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL