开始表演

今天来聊一下两个相似的方法,它们就是: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 方法的更多相关文章

  1. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  2. getBoundingClientRect()方法

    是在<javascript高级程序设计>中看到了这个方法.getBoundingClientRect在IE5中就有,但似乎不怎么引起我们注意. 返回值:它返回一个clientRect对象, ...

  3. JavaScript中getBoundingClientRect()方法详解

    获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...

  4. 利用getBoundingClientRect方法实现简洁的sticky组件

    补充于2016-03-20: 本文实现有不足,不完美的地方,请在了解本文相关内容后,移步阅读<sticky组件的改进实现>了解更佳的实现. sticky组件,通常应用于导航条或者工具栏,当 ...

  5. 工作中的趣事:聊聊ref/out和方法参数的传递机制

    0x00 前言 我在之前的游戏公司工作的时候,常常是作为一只埋头实现业务逻辑的码农.在工作之中不常有同事会对关于编程的话题进行交流,而工作之余也没有专门的时间进行技术分享.所以对我而言上家虽然是一家游 ...

  6. JavaScript中的getBoundingClientRect()方法

    这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. getBoundClientRect()方法返回的对象中和CSS中所定义不 ...

  7. CSSOM之getboundingclientrect和getclientrects

    TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...

  8. 获取元素位置信息:getBoundingClientRect

    一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一 ...

  9. WebBrowser常用属性方法介绍

    WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后 ...

随机推荐

  1. 2018春招-美团后台开发方向编程题 (python实现)

    第一题:字符串距离 题目: 给出两个相同长度的由字符 a 和 b 构成的字符串,定义它们的距离为对应位置不同的字符的数量.如串”aab”与串”aba”的距离为 2:串”ba”与串”aa”的距离为 1: ...

  2. Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架

    基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...

  3. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  4. 【转】使用SQL Server 2012的FileTable轻松管理文件

    一 .FileStream和FileTable介绍 我们经常需要把结构化数据(int.Char等)和非结构化数据(如Varbinary(max))一起存储,那我们在怎么存储的呢? 1. 在SQL Se ...

  5. 暴力攻击 PHP 脚本 初探

    考虑下面的HTML表单: CODE: <form action="http://example.org/login.php" method="POST"& ...

  6. 江苏公务员职位表导入MySQL

    USE `database`; /*Table structure for table `post` */ DROP TABLE IF EXISTS `post`; CREATE TABLE `pos ...

  7. Mac OS配置Android SDK环境变量(当不存在 .bash_profile 文件的时候)

    苹果系统已经包含完整的J2SE,其中就有JDK和JVM(苹果叫VM). 如果要在MAC系统下开发CODE.可以先装个IDE(NETBEANS/Eclipse等),而后不需要装JDK和JVM了,MAC下 ...

  8. manjaro开启sdd trim

      $ sudo systemctl enable fstrim.timer; $ sudo systemctl start fstrim.service; $ sudo systemctl stat ...

  9. Chapter 3 Phenomenon——17

    Dr. Cullen raised his eyebrows. "Do you want to stay?" Cullen医生抬起了他的眉毛“你想待在这吗?” "No, ...

  10. C语言理论知识

    C语言-----理论部分   一:软件开发概述1.程序语言的发展:机器语言-->汇编语言-->高级语言.2.软件开发的基本步骤与方法:分析问题,建立数学模型-->确定数据结构和算法- ...