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网页制作特殊效果用随机数
May 22 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
javascript 构建模块化开发过程解析
Sep 11 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
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
Js sort排序使用方法
2011/10/17 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
战友聚会邀请函
2014/01/18 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
社会工作专业求职信
2014/07/15 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android