Javascript 中 element 对象提供 offsetWidth, scrollWidth, clientWidth 等API,帮助我们了解元素占据的空间,下面我们具体了解以下这些API的意义:
offsetWidth:边框 + 内边距 + 内容宽度
![ac630bb8cbab33c97e8034c22a7829a7.png](https://i-blog.csdnimg.cn/blog_migrate/263618b77fb6e4349dacfd8fb4b08a13.png)
clientHeight:内边距 + 内容
![6598b2c5c1134939f70fd52dc94112d9.png](https://i-blog.csdnimg.cn/blog_migrate/118183c996228c90605d8a03d40bd80d.png)
scrollHeight
![5dada40110cfb123c06b96b052b79215.png](https://i-blog.csdnimg.cn/blog_migrate/ed0817dbdb951ce053e1413793196bc6.png)
getBoundingClientRect:返回实际渲染的宽高(边框 + 内边距 + 内容宽度)。
例如:
如果元素的宽 width:100px,变化 transform:scale(0.5),此时 getBoundingClientRect() 将返回宽50,而 offsetWidth 将返回宽100.
getBoundingClientRect() 方法的返回值是一个 DOMRect 对象,拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。
![a24bb4e97e9f9bdc61b2d6ce16075871.png](https://i-blog.csdnimg.cn/blog_migrate/e058a5e529d1b7ba5c9db34880205f93.jpeg)