Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

获取元素在可见区域中的矩形区域

  DOM元素有提供getClientRects与getBoundingClientRect两个方法来获取元素在可见区域中的矩形区域。具体使用哪个取决于元素本身的性质。这两个方法也不算很常用,因为如果只是取单个属性使用offset*更方便。不过在一些特殊情况下这个方法会方便很多。
  从这两个方法的名字上就能看出getClientRects中Rect是复数的,返回的当然是一个数组。getBoundingClientRect中Rect是单数的,则是直接返回一个矩形对象。那么为什么从取元素的矩形区域,有这两种情况呢?这是因为元素的布局方式不同!具有block性质的元素本身就是一个矩形,所以直接使用getBoundingClientRect来获取。block元素的情况很简单,我就不强调说明了。非block元素的情况就不同,由于缺少block属性,元素就未必是一个矩形。比如
<style>
span {border:1px solid red;}
</style>
<span id="span">次碳酸钴<br/>次碳酸钴</span>

  换了个行就把原理的矩形给破坏了,这样它就变成了多个矩形区域。对这个SPAN调用getClientRects就能找到它所占的所有矩形区域了。

  不过我觉得一般也不会蛋疼到去计算非block元素的区域,所以getClientRects这东西一辈子也用不上几次的。倒是getBoundingClientRect的使用频率会高一些。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^