获取元素距离浏览器周边的位置的方法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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
React中的Context应用场景分析
Jun 11 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中的stdClass类
2014/04/18 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
wxPython中listbox用法实例详解
2015/06/01 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
法学专业个人求职信
2013/09/26 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
英语专业自荐书
2014/06/13 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL