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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
vue实现动态数据绑定
Apr 28 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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中数组的分组排序实例
2014/06/01 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python实现两款计算器功能示例
2017/12/19 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Django分页功能的实现代码详解
2019/07/29 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python设置环境变量的作用整理
2020/02/17 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
优秀公益广告词大全
2014/03/19 职场文书
校外活动方案
2014/08/28 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
公司委托书格式范文
2014/10/09 职场文书
2015元旦标语横幅
2014/12/09 职场文书
大学生在校表现评语
2014/12/31 职场文书