js getBoundingClientRect使用方法详解


Posted in Javascript onJuly 17, 2019

主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。

getBoundingClientRect

Element.getBoundingClientRect()

含义:

方法返回元素的大小及其相对于视口的位置。

值:

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合。

属性值:

  • top: 元素上边距离页面上边的距离
  • left: 元素右边距离页面左边的距离
  • right: 元素右边距离页面左边的距离
  • bottom: 元素下边距离页面上边的距离
  • width: 元素宽度
  • height: 元素高度

js getBoundingClientRect使用方法详解

注意:

如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。

如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。

js getBoundingClientRect使用方法详解

如图所示:

当页面的元素在浏览器的左上角时,得到的top和left值为负值,right和bottom值为正值。

应用场景一

1、获取dom元素相对于网页左上角定位的距离

以前的写法是通过offsetParent找到元素到定位父级元素,直至递归到顶级元素body或html。

// 获取dom元素相对于网页左上角定位的距离
function offset(el) {
  var top = 0;
  var left = 0;
  // 获取元素的位置还有getBoundingClientRect的方法
  // 从网上得知offset的兼容较差而且设置translate3D的y轴值给元素定位了y轴的距离后
  //会出现offsetTop为0
  do {
    top += el.offsetTop;
    left += el.offsetLeft;
  }
  while(el = el.offsetParent);// 存在兼容性问题,需要兼容
  
  
  return {
    top: top,
    left: left
  }
}

测试代码如下:

var odiv = document.getElementsByClassName('markdown-body');
offset(a[0]); // {top: 271, left: 136}

现在根据getBoundingClientRect这个api,可以写成这样:

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollLeft;

应用场景二

2、判断元素是否在可视区域内

function isElView(el) {
  var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离
  var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可见区域顶端的距离
  var se = document.documentElement.clientHeight; // 浏览器可见区域高度。
  
  if (top < se && bottom > 0) {
    return true;
  }
  else if (top >= se || bottom <= 0) {
    // 不可见
  }
  return false;
}

缺点

这个属性频繁计算会引发页面的重绘,可能会对页面的性能造成影响。

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

Javascript 相关文章推荐
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 #Javascript
Vue发布项目实例讲解
Jul 17 #Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 #Javascript
百度小程序自定义通用toast组件
Jul 17 #Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 #Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
You might like
PHP仿盗链代码
2012/06/03 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
Js组件的一些写法
2010/09/10 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
QML实现钟表效果
2020/06/02 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python urllib和urllib3知识点总结
2021/02/08 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
行政执法作风整顿剖析材料
2014/10/11 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
遗嘱范文
2015/08/07 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
Python3 类型标注支持操作
2021/06/02 Python