获取元素距离浏览器周边的位置的方法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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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/12/19 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python3图片转换二进制存入mysql
2013/12/06 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python WindowsError的错误代码详解
2017/07/23 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python中 * 的用法详解
2019/07/10 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
法律意见书范文
2015/06/04 职场文书
《假如》教学反思
2016/02/17 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫