获取元素距离浏览器周边的位置的方法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 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP与以太坊交互详解
2018/08/24 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python素数检测的方法
2015/05/11 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
请介绍一下Ant
2016/07/22 面试题
大学生自荐信
2013/12/11 职场文书
公司董事长职责
2013/12/12 职场文书
2014年财政所工作总结
2014/11/22 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
全民创业工作总结
2015/08/13 职场文书
队名及霸气口号大全
2015/12/25 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书