getBoundingClientRect使用指南

author: @TiffanysBear

主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。

getBoundingClientRect

Element.getBoundingClientRect()

含义:

方法返回元素的大小及其相对于视口的位置。

值:

返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合。

属性值:

  • top: 元素上边距离页面上边的距离
  • left: 元素右边距离页面左边的距离
  • right: 元素右边距离页面左边的距离
  • bottom: 元素下边距离页面上边的距离
  • width: 元素宽度
  • height: 元素高度

注意:

如果所有的元素边框都是空边框,那么这个矩形给该元素返回的 width、height 值为0,left、top值为第一个css盒子(按内容顺序)的top-left值。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。

如图所示:

当页面的元素在浏览器的左上角时,得到的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;
}

缺点

这个属性频繁计算会引发页面的重绘,可能会对页面的性能造成影响。

getBoundingClientRect使用指南的更多相关文章

  1. 【WebGL】《WebGL编程指南》读书笔记——第2章

    一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...

  2. 企业IT管理员IE11升级指南【8】—— Win7 IE8和Win7 IE11对比

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  3. WebGL编程指南案例解析之绘制一个点

    <!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...

  4. 《Vue.js 2.x实践指南》 已出版

    <Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...

  5. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  6. UE4新手之编程指南

    虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...

  7. JavaScript权威指南 - 对象

    JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...

  8. JavaScript权威指南 - 数组

    JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...

  9. const extern static 终极指南

    const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...

随机推荐

  1. SVN 问题解决之 Working copy path does not exist in repository

    同事的SVN更新时提示某个特定文件提示 Working copy path does not exist in repository svn更新会被这个错误打断,导致无法完全更新 删掉文件再更新仍然有 ...

  2. vue去哪儿网项目环境配置

     一.首先安装node.js 根据自己的(windows或mac)系统进行安装node,在开发环境中一般安装LTS版本.安装成功后,在终端输入"node -v"和"npm ...

  3. C++线程同步之原子操作

    所谓的原子操作就是指一个线程对于某一个资源做操作的时候能够保证没有其它的线程能够对此资源进行访问. 原子操作仅仅能够解决某一个变量的问题,只能使得一个整型数据做简单算术运算的时候是原子的. 以下案例需 ...

  4. html5+css3 background-clip 技巧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 《浏览器工作原理与实践》<08>调用栈:为什么JavaScript代码会出现栈溢出?

    在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript 引擎先会对其进行编译,并创建执行上下文.但是并没有明确说明到底什么样的代码才算符合规范. 那么接下来我们就来明确下,哪些情况下代码才 ...

  6. Vs2017 FrameWork EF Mysql 控制台应用

    1  运行环境   vs2017   Net FromWork 4.6.2  手动版 没有 ado.net 实体数据模型 2 NuGet  MySql.Data.Entity 6.10.9, MySq ...

  7. Array 和 ArrayList 有何区别?(未完成)

    Array 和 ArrayList 有何区别?(未完成)

  8. ERROR: Could not install packages due to an EnvironmentError: [WinError 5] 拒绝访问

    报错:ERROR: Could not install packages due to an EnvironmentError: [WinError 5] 拒绝访问.: 'E:\\Anoconda\\ ...

  9. WPF绑定属性

    1.创建model类 model类要继承接口INotifyPropertyChanged,用于通知客户端属性值已更改 public class StudentModel : INotifyProper ...

  10. web后端开发语言Java和PHP的比较

    理念上的不同导致了Java和PHP在Web应用开发上显示了不同的结果,尽管Java的数学计算和数据库访问都有优势,架构也相当完美,但是PHP却可以简单轻松地支持高强度Web访问,能够快速开发应用,支持 ...