聊聊 getClientRects 和 getBoundingClientRect 方法
开始表演
今天来聊一下两个相似的方法,它们就是:getBoundingClientRect()、getClientRects()。
只见它们俩手拉手地登上了舞台,一个鞠躬,便开始滔滔不绝起来。
自述
getClientRects()
“我来了,你看到我了,当然看到我咯,彪悍一个。”
“想知道怎么驾驭我吗?你想吗?像这样。”
let rectList = document.getElementById('box').getClientRects();
/*
我返回的是一个包含一个或多个 DOMRect 对象的数组;
哈哈,这也是我稍微彪悍的原因。
*/
“在这里,我要粗略讲下什么是DOMRect对象(也是ClientRect对象、TextRectangle对象)。它呢,是一个盒子的边界矩形,简单看就是一个包着内容的盒子。”
“在我这里,所有规则我说了算。”
“块级元素我认为就是一个整体,所以在我这里,块级元素直接返回盒子模型的矩形范围。”
“不过呢,行内元素会产生自动换行这类看似分割整体的歧义,所以,我会把行内元素根据它换行划分成多个盒子边界矩形。这也是我和我的兄弟——getBoundingClientRect的区别。也是我对我返回类型的一种解释吧。”
“每个盒子边界矩形都有些什么?能带给我们什么惊喜?哈哈,就让我的兄弟给你们说吧!我累了,坐会。”
getBoundingClientRect()
“终于到我了,想必等很久了吧,那我再等我清下嗓子,咳咳。开始咯!”
“你要像这样子使用我,而且我对块级元素和行内元素是一视同仁的,可能我心比较大吧。”
let rectObject = document.getElementById('box').getBoundingClientRect();
/* 返回的是一个 DOMRect(或者叫 TextRectangle、ClientRect) 对象:
[object DOMRect] {
bottom: 208,
height: 200,
left: 8,
right: 208,
top: 8,
width: 200,
x: 8,
y: 8,
toJSON: function toJSON() {...}
}
*/
“忘了最重要的自我介绍了,那还是要说下的。”
“我是会返回元素的大小和它相对于视窗的位置,即,除了大小(width和height)其余的属性都是相对于视窗的左上角位置而言的,所以当存在滚动时,位置有可能是负值,还有一点,这些都是只读属性。”
图例:
图上白色区域的即是视窗区域,左上角为0,0点。
落幕
只见幕布徐徐落下,一胖一瘦相扶走下舞台。
题外话,第一次这么写,感觉很乱,说错的希望大家指出来,我会虚心改进。谢谢。
参考
聊聊 getClientRects 和 getBoundingClientRect 方法的更多相关文章
- getBoundingClientRect方法获取元素在页面中的相对位置
获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...
- getBoundingClientRect()方法
是在<javascript高级程序设计>中看到了这个方法.getBoundingClientRect在IE5中就有,但似乎不怎么引起我们注意. 返回值:它返回一个clientRect对象, ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- 利用getBoundingClientRect方法实现简洁的sticky组件
补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...
- 工作中的趣事:聊聊ref/out和方法参数的传递机制
0x00 前言 我在之前的游戏公司工作的时候,常常是作为一只埋头实现业务逻辑的码农.在工作之中不常有同事会对关于编程的话题进行交流,而工作之余也没有专门的时间进行技术分享.所以对我而言上家虽然是一家游 ...
- JavaScript中的getBoundingClientRect()方法
这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. getBoundClientRect()方法返回的对象中和CSS中所定义不 ...
- CSSOM之getboundingclientrect和getclientrects
TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...
- 获取元素位置信息:getBoundingClientRect
一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一 ...
- WebBrowser常用属性方法介绍
WebBrowser 常用属性方法 ■■方法 ============================== ▲GoBack 相当于IE的"后退"按钮,使你在当前历史列表中后 ...
随机推荐
- 2018春招-美团后台开发方向编程题 (python实现)
第一题:字符串距离 题目: 给出两个相同长度的由字符 a 和 b 构成的字符串,定义它们的距离为对应位置不同的字符的数量.如串”aab”与串”aba”的距离为 2:串”ba”与串”aa”的距离为 1: ...
- Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架
基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...
- 在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...
- 【转】使用SQL Server 2012的FileTable轻松管理文件
一 .FileStream和FileTable介绍 我们经常需要把结构化数据(int.Char等)和非结构化数据(如Varbinary(max))一起存储,那我们在怎么存储的呢? 1. 在SQL Se ...
- 暴力攻击 PHP 脚本 初探
考虑下面的HTML表单: CODE: <form action="http://example.org/login.php" method="POST"& ...
- 江苏公务员职位表导入MySQL
USE `database`; /*Table structure for table `post` */ DROP TABLE IF EXISTS `post`; CREATE TABLE `pos ...
- Mac OS配置Android SDK环境变量(当不存在 .bash_profile 文件的时候)
苹果系统已经包含完整的J2SE,其中就有JDK和JVM(苹果叫VM). 如果要在MAC系统下开发CODE.可以先装个IDE(NETBEANS/Eclipse等),而后不需要装JDK和JVM了,MAC下 ...
- manjaro开启sdd trim
$ sudo systemctl enable fstrim.timer; $ sudo systemctl start fstrim.service; $ sudo systemctl stat ...
- Chapter 3 Phenomenon——17
Dr. Cullen raised his eyebrows. "Do you want to stay?" Cullen医生抬起了他的眉毛“你想待在这吗?” "No, ...
- C语言理论知识
C语言-----理论部分 一:软件开发概述1.程序语言的发展:机器语言-->汇编语言-->高级语言.2.软件开发的基本步骤与方法:分析问题,建立数学模型-->确定数据结构和算法- ...