敲碎时间,铸造不朽的个人专栏
上一篇

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的情况

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

X

欢迎加群学习交流

联系我们