js中getBoundingClientRect的作用及兼容方案详解


Posted in Javascript onFebruary 01, 2018

1、getBoundingClientRect的作用

getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。

执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性,这些属性以一个对象的方式返回。

getBoundingClientRect()

这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById('box'); // 获取元素

alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

2.getBoundingClientRect上下左右属性值解释

主要是left和bottom要解释一下,left是指右边到页面最左边的距离,bottom是指底边到页面顶边的距离。

看图:

 js中getBoundingClientRect的作用及兼容方案详解

3. 浏览器兼容性

ie5以上都能支持,但是又一点点地方需要修正一下,

IE67的left、top会少2px,并且没有width、height属性。

4、利用getBoundingClientRect来写一个获取html元素相对于视窗的位置集合的方法

<div id="test" style="width: 100px; height: 100px; background: #ddd;"></div>
<script>
 function getObjXy(obj){
  var xy = obj.getBoundingClientRect();
  var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2,其他高级点的浏览器为0
   bottom = xy.bottom,
   left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2,其他高级点的浏览器为0
   right = xy.right,
   width = xy.width||right - left, //IE67不存在width 使用right - left获得
   height = xy.height||bottom - top;

  return {
   top:top,
   right:right,
   bottom:bottom,
   left:left,
   width:width,
   height:height
  }
 }

 var test = getObjXy(document.getElementById('test'));
 alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
JS 实现百度搜索功能
Feb 01 #Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 #Javascript
微信小程序日期时间选择器使用方法
Feb 01 #Javascript
NW.js 简介与使用方法
Feb 01 #Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 #Javascript
Vue组件之自定义事件的功能图解
Feb 01 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP反射基础知识回顾
2020/09/10 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
理解javascript中的闭包
2017/01/11 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Django中Forms的使用代码解析
2018/02/10 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
详解Python中的测试工具
2019/06/09 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
2014年社区植树节活动方案
2014/02/28 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
批评与自我批评总结
2014/10/17 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python