获取元素距离浏览器周边的位置的方法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笔记 String类replace函数的一些事
Sep 22 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
JS实现购物车特效
Feb 02 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
js仿微信抢红包功能
Sep 25 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
React key值的作用和使用详解
Aug 23 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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在线解压ZIP文件的方法
2014/12/30 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PDO::getAttribute讲解
2019/01/28 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python的exec、eval使用分析
2017/12/11 Python
python执行精确的小数计算方法
2019/01/21 Python
python学生管理系统开发
2019/01/30 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
你常见到的runtime exception
2016/09/05 面试题
采购主管的岗位职责
2013/12/17 职场文书
网络工程师职业规划
2014/02/10 职场文书
双创工作实施方案
2014/03/26 职场文书
煤矿安全承诺书
2014/05/22 职场文书