获取元素距离浏览器周边的位置的方法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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python容器类型公共方法总结
2020/08/19 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
六五普法规划实施方案
2014/03/21 职场文书
关于保护环境的建议书
2014/08/26 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
导游词之太湖
2019/10/08 职场文书
详解nginx进程锁的实现
2021/06/14 Servers