获取元素距离浏览器周边的位置的方法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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
vue router 配置路由的方法
Jul 26 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
基于JS判断对象是否是数组
2020/01/10 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python代码实现ID3决策树算法
2017/12/20 Python
vue常用指令代码实例总结
2020/03/16 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
小结Python的反射机制
2020/09/28 Python
python中K-means算法基础知识点
2021/01/25 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
2014年小学校长工作总结
2014/12/08 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏