获取元素距离浏览器周边的位置的方法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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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生成html分页列表的代码
2007/03/18 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Python用模块pytz来转换时区
2016/08/19 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python猴子补丁知识点总结
2020/01/05 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
实习护士自荐信
2014/06/21 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
地震捐款简报
2015/07/21 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Python 如何安装Selenium
2021/05/06 Python
Golang 字符串的常见操作
2022/04/19 Golang
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python