获取元素的尺寸信息
| 属性/方法 | 包含内容 | 包含padding | 包含border | 包含滚动条 | 内联元素支持 | 受transform影响 | 返回值类型 |
|---|---|---|---|---|---|---|---|
| clientWidth | 内容+padding | 是 | 否 | 否 | 否 | 否 | number |
| offsetWidth | 内容+padding+border+滚动条 | 是 | 是 | 是 | 否 | 否 | number |
| getClientRects()[0].width | 内容+padding | 是 | 否 | 否 | 是 | 是 | number |
| getBoundingClientRect().width | 内容+padding+border | 是 | 是 | 否 | 是 | 是 | number |
使用场景
- 获取可视内容区大小：使用
clientWidth - 获取元素整体布局尺寸：使用
offsetWidth或getBoundingClientRect() - 处理内联元素：使用
getClientRects()或getBoundingClientRect() - 需要精确的几何位置：使用
getBoundingClientRect()
记忆技巧：
- client系列：关注"客户端"可视区域（不含border）
- offset系列：关注"偏移量"整体布局尺寸（含border）
- getBoundingClientRect：关注精确几何位置（适合定位计算）
- getClientRects：专门处理可能被分割的元素（如换行文本）
概念
1. clientWidth
-
定义：元素内容区宽度 + 内边距(padding)，不包括滚动条、边框(border)和外边距(margin)
-
公式：
width + padding-left + padding-right -
特点：
- 不包含滚动条宽度
- 如果元素有滚动条，会减去滚动条宽度
- 对于内联元素(inline)返回0
2. offsetWidth
- 定义：元素整体可见宽度，包括内容、内边距、边框和垂直滚动条(如果存在)
- 公式：
width + padding-left + padding-right + border-left + border-right + 垂直滚动条宽度 - 特点：
- 包含边框和滚动条
- 对于隐藏元素(display:none)返回0
- 对于内联元素返回0
3. getClientRects()[0].width
- 定义：返回元素第一个矩形片段的宽度（内联元素可能被分割成多个矩形）
- 特点：
- 对于块级元素，通常等于
clientWidth - 对于内联元素，返回实际渲染的每行宽度
- 不包含边框和滚动条
- 可以获取被分割的内联元素每部分的宽度
- 对于块级元素，通常等于
4. getBoundingClientRect().width
- 定义：元素在页面中的布局宽度，包括内容、内边距和边框
- 公式：
width + padding-left + padding-right + border-left + border-right - 特点：
- 包含边框但不包含外边距
- 不考虑滚动条（与offsetWidth不同）
- 对于内联元素返回整个元素的总宽度
- 受CSS变换(transform)影响
