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中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
jQuery实现简单全选框
Sep 13 jQuery
深入了解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
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
joomla数据库操作示例代码
2016/01/06 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
vue使用nprogress实现进度条
2019/12/09 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python实现图像全景拼接
2020/03/27 Python
pytorch中index_select()的用法详解
2021/01/06 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
领导欢迎词范文
2015/01/26 职场文书
SQL基础的查询语句
2021/11/11 MySQL
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技