getBoundingClientRect属性研究
概念
getBoundingClientRect 返回 width、height和下图中的6个属性
实测总结:
抓住一个核心点,就是height、width的值:
- box-sizing 是 content-box时,width和height = 内容+border+padding
- box-sizing是 border-box时, width和height = 我们设置的width、height
所以:
- top、left很好算,就是元素到左上角原点的距离
- bottom、right说白了就是在 top/left的基础上 加上 上面说的 height/width
- 另外一点需要注意的是:当页面有滚动条时,随着滚动条左右上下滚动,top、bottom、left、right都会跟着变;比如原来的top值是0,页面向上滚动了100px,那么top值就成了 -100