震惊！！！一眼就能看懂的getBoundingClientRect用法！！！

主要介绍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），这样就可以获取与当前的滚动位置无关的值。

自己封装的vue组件在div的上下左右拉伸中用到, 需要的可以私信点赞给源码哦

震惊！！！一眼就能看懂的getBoundingClientRect用法！！！相关推荐

java循环1000000000_Java11比Java8快多少，不是测试人员一眼也能看懂
原标题:Java11比Java8快多少,不是测试人员一眼也能看懂简单粗暴: 10亿次相加,循环10次,每次执行时间记录结果如下: 硬件环境: IDE:IntelliJ IDEA 2019.1 x64 ...
android培训技能！一眼就能看懂的Android自学手册，成功入职字节跳动
背景曾经有人问我,为什么要下班了不找点乐子,还花这么多时间去写一份资料.你是不是傻! 我无言以对! 但是不得不说,这份笔记确实倾注了我很多心血. 至于,我为什么要做这份资料,为什么又要写这篇文章!是 ...
一眼就能看懂的cin.ignore()函数详解
看了很多网上的cin.ignore()函数的解析,发现万片一律,不知道是你抄我的还是我抄你的,还都没有注明转载,而且纯粹是教科书的死搬硬套. 希望我的这篇博客可以帮到大家. 首先,他的函数原型是这样的 ...
一眼就能看懂的Android自学手册，赶紧收藏！
一.前言关于开源框架这块,其实主要是针对自己项目中使用到的框架进行准备.从使用,到使用场景.优缺点以及源码实现都需要逐一掌握理解.这一部分是向面试官展示自己水平与能力的一个重要部分,所以要着重准备. ...
一眼就能看懂的Java自学手册，终局之战
珍藏版(1)--Mybatis入门 1.什么是MyBatis 2.为什么我们要用Mybatis? 3.Mybatis快速入门 3.1 导入开发包 3.2准备测试工作 3.3 创建mybatis配置文件 ...
阿里P7大牛手把手教你！一眼就能看懂的Android自学手册，真香！
前言曾听过很多人说Android学习很简单,做个App就上手了,工作机会多,毕业后也比较容易找工作.这种观点可能是很多Android开发者最开始入行的原因之一. 在工作初期,工作主要是按照业务需求实 ...
家装强电弱电布线图_家装水电施工标准（图文版），装修小白一眼也能看懂。...
如果把家比喻成一个人,房子是骨骼,那么水电路则相当于人体的血管和动脉,正因为他们的存在,才赋予家鲜活的生命.由此,水电施工自然也成为家装工程的重中之重. 水电走线原则 ※ 水电弹线放样施工,使用切割机 ...
测试比java_Java11比Java8快多少，不是测试人员一眼也能看懂
简单粗暴: 10亿次相加,循环10次,每次执行时间记录结果如下: 硬件环境: IDE:IntelliJ IDEA 2019.1 x64 JDK版本: Windows150.94 MBjdk-11.0. ...
一眼就能看懂的Android自学手册，深度好文
前言这些题目是网友去美团等一线互联网公司面试被问到的题目.笔者从自身面试经历.各大网络社交技术平台搜集整理而成,熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率. 主要分为以下几部分: (1 ...

震惊！！！一眼就能看懂的getBoundingClientRect用法！！！

震惊！！！一眼就能看懂的getBoundingClientRect用法！！！相关推荐

最新文章

热门文章