获取元素距离浏览器周边的位置的方法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 继承详解(四)
Jul 13 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 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程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python中使用np.delete()的实例方法
2021/02/01 Python
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
英文版区域经理求职信
2013/10/23 职场文书
效能监察建议书
2014/05/19 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
升职感谢信
2015/01/22 职场文书
个人业务学习心得体会
2016/01/25 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书