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用Number方法实现string转int
May 13 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue 文件目录结构详解
Nov 24 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
详解 javascript对象创建模式
Oct 30 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php常用Stream函数集介绍
2013/06/24 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php提交post数组参数实例分析
2015/12/17 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
推荐11个实用Python库
2015/01/23 Python
Python中的作用域规则详解
2015/01/30 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python中bytes和str类型的区别
2019/10/21 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
建筑施工实习自我鉴定
2013/09/19 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
人事部专员岗位职责
2014/03/04 职场文书
小学运动会班级口号
2014/06/09 职场文书
公益广告标语
2014/06/19 职场文书
单位介绍信格式
2015/01/31 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python