获取元素距离浏览器周边的位置的方法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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
js canvas实现擦除动画
Jul 16 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
JS中的模糊查询功能
Dec 08 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
小程序开发基础之view视图容器
2018/08/21 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
python数组过滤实现方法
2015/07/27 Python
python django事务transaction源码分析详解
2017/03/17 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
毕业设计计划书
2014/01/09 职场文书
学历公证委托书
2014/04/09 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
实习推荐信
2014/05/10 职场文书
体育教师求职信
2014/05/24 职场文书
质量管理标语
2014/06/12 职场文书
会议欢迎标语
2014/06/30 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS