获取元素距离浏览器周边的位置的方法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去掉字符串里的所有空格
Feb 08 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
javascript工具库代码
Mar 29 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
Puppet的一些技巧
Sep 17 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
小程序实现上下移动切换位置
Sep 23 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生成缩略图的代码
2011/01/12 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
python简单文本处理的方法
2015/07/10 Python
Sanic框架配置操作分析
2018/07/17 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
学习十八大报告感言
2014/02/04 职场文书
家具促销活动方案
2014/02/16 职场文书
广告设计应届生求职信
2014/03/01 职场文书
公司总经理岗位职责
2014/03/15 职场文书
公司投资建议书
2014/05/16 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers