获取元素距离浏览器周边的位置的方法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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
jQuery实现日历效果
Sep 11 jQuery
Vue和Flask通信的实现
May 19 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Python机器学习之决策树和随机森林
Jul 15 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二维数组排序详解
2013/11/06 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
img标签中onerror用法
2009/08/13 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
学校党员对照检查材料
2014/08/28 职场文书
辞职信的写法
2015/02/27 职场文书