获取元素距离浏览器周边的位置的方法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引用对象的方法代码
Aug 13 Javascript
jQuery参数列表集合
Apr 06 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
深入理解Node内建模块和对象
Mar 12 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 mvc开发模式的感想
2011/06/28 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
event.srcElement+表格应用
2006/08/29 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python交互式图形编程实例(二)
2017/11/17 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
军训结束新闻稿
2015/07/17 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Python图像处理库PIL详细使用说明
2022/04/06 Python
使用refresh_token实现无感刷新页面
2022/04/26 Javascript