获取元素距离浏览器周边的位置的方法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 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
动态加载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使用eAccelerator的API开发详解
2013/06/09 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
深入理解React高阶组件
2017/09/28 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python+django实现文件上传
2016/01/17 Python
Python 专题四 文件基础知识
2017/03/20 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
初中家长寄语
2014/04/02 职场文书
个人求职自荐信范文
2014/06/20 职场文书
公司开会通知
2015/04/20 职场文书
房产证明范本
2015/06/19 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python