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 相关文章推荐
JavaScript类属性的访问方式详解
Feb 11 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
js密码强度校验
Nov 10 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python实现泊松图像融合
2018/07/26 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
优秀员工推荐材料
2014/12/20 职场文书
物业管理交接协议书
2016/03/24 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers