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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 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根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
VBScript版代码高亮
2006/06/26 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
Python类属性的延迟计算
2016/10/22 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python实现连连看游戏
2020/02/14 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
中学老师的自我评价
2013/11/07 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015大学生求职信范文
2015/03/20 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书