getClientRects(学习)

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

Element 接口的 getClientRects() 方法返回 DOMRect 对象的集合,这些对象指示客户端中每个 CSS 边框框的边界矩形。

大多数元素每个只有一个边框,但多行内联元素(例如多行 <span> 元素,默认情况下)在每一行周围都有一个边框。

调用语法:

let rectCollection = object.getClientRects();

返回值是 DOMRect 对象的集合,每个与元素关联的 CSS 边框框都有一个。每个 DOMRect 对象都包含只读的 left、top、right 和 bottom 属性,以像素为单位描述边框框,左上角相对于视口的左上角。对于带有标题的表格,即使标题位于表格的边框之外,也会包含标题。 当在除外部 <svg> 之外的 SVG 元素上调用时,生成的矩形相对于“视口”是元素的外部 <svg> 建立的视口(并且要清楚,矩形也由 external-<svg> 的 viewBox 变换,如果有的话)。

 

最初,Microsoft 打算使用此方法为每行文本返回一个 TextRectangle 对象。但是,CSSOM 工作草案指定它为每个边框框返回一个 DOMRect。对于内联元素,这两个定义是相同的。但是对于块元素,Mozilla 将只返回一个矩形。

 

计算矩形时会考虑视口区域(或任何其他可滚动元素)的滚动量。

返回的矩形不包括任何可能发生溢出的子元素的边界。

对于 HTML <area> 元素、自身不呈现任何内容的 SVG 元素、display:none 元素以及通常不直接呈现的任何元素,将返回一个空列表。

即使对于具有空边框框的 CSS 框,也会返回矩形。左、上、右和下坐标仍然有意义。

小数像素偏移是可能的。

这里的例子可以参考mdn官网的例子

这个例子列举了三种情况:

1、p标签里面有span,然后再不同元素上画rect的情况

2、ol里面有li元素,同样在不同元素上画rect的情况

3、table里面有caption,然后在不同元素画rect的情况

版权声明:著作权归作者所有。

相关推荐

JavaScript ES 2017: 通过示例学习Async/Await

预备知识ES 2017新增了Asynchronous函数。 在JavaScript中,Async函数本质上是一种处理异步代码的比较简洁的方法。 为了理解这些是什么,以及它们是如何工作的,我们首先需要了解Promise。如果你不知道Promise是什么,那么你应该先阅读我发表的关于Promise的这篇文章。 在理解Promise之前,你是不会理解JavaScr

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

GPU架构学习资源

这里收藏了gpu学习的网站,pdf等等资源:http://courses.cms.caltech.edu/cs179/http://www.amd.com/Documents/GCN_Architecture_whitepaper.pdfhttps://community.arm.com/graphics/b/bloghttp://cdn.imgtec.com/sdk-documentation/

[译]5分钟学习React.js

本教程将通过构建一个非常简单的应用程序,让你对React.js有基本的了解。我会抛弃所有我认为不是核心的东西。如果你喜欢我的教学风格,在我们即将推出免费的React.js课程时你想收到通知,可以在此留下电子邮件。设置在开始使用React时,你应该使用最简单的设置:在html文件中使用script标签导入React和ReactDOM库,如下所示:<html><head><

你今天应该学习的20个Python代码段(翻译)

Python是一门非BS编程语言。可读性和设计简单性是其广受欢迎的两个主要原因。正如Python的禅宗所说:美丽胜于丑陋。 显式胜于隐式。这就是为什么值得记住一些常见的Python技巧来帮助改善代码设计的原因。这些将为你节省每次需要到Stack Overflow找解决方案的时间。在日常编码练习中,以下技巧将非常有用。1.反转字符串以下代码段使用Python切片操作来反转字符串。# Rev

thenjs 学习

thenjs 是一个js的异步控制流程库 特点 可以像标准的Promise那样,把N多异步回调函数写成一个长长的then链,并且比Promise更简洁自然。因为使用标准Promise的then链,其中的异步函数都必须转换成Promise,Thenjs则无需转换,像使用CallBack一样执行异步函数即可。 强大的Error机制,可以捕捉任何同步和异步的异步错误。 开启debug模式

JPA实体状态学习-(瞬时态:Transient)

为了学习实体的状态,我们还是贴出这张实体状态转换迁移图:Transient(瞬时态)按照上图的描述,java对象在内存中被赋值后,没有调用entityManager.persist()方法之前实体对象所处的状态就是瞬時態举个例子:Teacher teacher = new Teacher("email@dot.com");此时,实例teacher就处于new/transient态(备注:这里的ne

JPA实体状态学习-(持久态:Persistent)

今天我们继续学习JPA的实体状态转化,老规矩贴上实体转化的转化图: 上一节我们学习了:entityManager调用persist()方法后,实体的状态从transient到persistent,这个时候对persistent状态的实体改变也会同步持久化到数据库,执行tx.commit()之后实体进入detached状态,此时对实体进行改变后不会同步到数据库。今天我们来看看transie

JPA实体状态学习-(游离态:Detached)

今天我们学习另一种实体状态,老规矩还是先上图:Detached(游离态 unmanaged)An Object becomes detached when the currently running Persistence Context is closed. Any changes made to detached objects are no longer automatically prop