获取元素距离浏览器周边的位置的方法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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
使用Mock.js生成前端测试数据
Dec 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 JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
python求众数问题实例
2014/09/26 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python内置函数delattr的具体用法
2017/11/23 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python pymsql模块的使用
2020/09/07 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
安全承诺书格式
2014/05/21 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
小学四年级学生评语
2014/12/26 职场文书
个人简历求职信范文
2015/03/20 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang