DOM 中常见宽度属性详解与应用

DOM 中常见宽度属性详解与应用

经常在做“文本是否超出容器”、“自适应布局”、“滚动条判断”等功能时，需要用到 scrollWidth、clientWidth 等属性。下面我们来系统讲清楚它们的区别与用法。

---

一张图搞懂它们的区别

+-----------------------------+       ← offsetWidth
|    padding                 |▕
|  +---------------------+   |       ← clientWidth
|  | content             |   |
|  |  (实际文字内容区域) |→→→→→→→ scrollWidth（内容真实宽度）
|  +---------------------+   |
+-----------------------------+

---

各个属性详解

属性名	含义	是否包含滚动条	是否包含 padding	常用用途
clientWidth	元素 可视区域宽度（包含 padding，不含滚动条）	❌	✅	判断是否超出可视区域
scrollWidth	元素 内容实际宽度（即使被隐藏的部分）	❌	✅	判断内容是否溢出
offsetWidth	元素 边框 + 滚动条 + padding + 内容宽度	✅（有滚动条）	✅	获取整体占位宽度
getBoundingClientRect().width	元素 实际渲染宽度（小数）	✅	✅	精确布局计算（小数精度）

---

✅ 使用示例与场景

1. ✅ 判断文字是否溢出容器

const isOverflow = el.scrollWidth > el.clientWidth

应用场景：判断是否需要显示 tooltip（如 TextTipsPlus 中）

---

2. ✅ 判断是否出现滚动条（横向或纵向）

const hasScrollX = el.scrollWidth > el.clientWidth
const hasScrollY = el.scrollHeight > el.clientHeight

---

3. ✅ 获取元素真实宽度（精确小数）

const rect = el.getBoundingClientRect()
console.log(rect.width)

优点：比 offsetWidth 精确，单位为浮点数（如 101.33px）

---

4. ✅ 获取元素在页面上的位置与大小

const { top, left, width, height } = el.getBoundingClientRect()

用途：用于定位浮层、tooltip、弹窗等

---

5. ✅ 动态宽度内容容器自适应

el.style.width = el.scrollWidth + 'px'

用途：标签栏、自动适配按钮内容等

---

实际对比代码（可在浏览器 Console 运行）

<div id="box" style="width: 100px; padding: 10px; border: 1px solid #ccc; overflow: auto">
  这是一个很长很长的文本内容测试，用于判断 scrollWidth 和 clientWidth 区别。
div>

const el = document.getElementById('box')

console.log('clientWidth:', el.clientWidth)      // 100 - 滚动条（不含边框）
console.log('scrollWidth:', el.scrollWidth)      // 实际文字内容宽度（可超出）
console.log('offsetWidth:', el.offsetWidth)      // 包含边框+滚动条
console.log('getBoundingClientRect:', el.getBoundingClientRect().width)

---

️ 表格总结（建议收藏）

属性名	包含内容	浮点值	常用场景
clientWidth	内容 + padding（不含滚动条）	❌	判断内容是否超出显示区域
scrollWidth	内容总宽度（不管有没有被遮挡）	❌	是否出现滚动条，内容真实大小
offsetWidth	内容 + padding + 滚动条 + border	❌	获取占用空间
getBoundingClientRect().width	渲染结果（含 padding、border）	✅	精确布局计算（浮点更准）

---

小结

• scrollWidth > clientWidth 是最常见的「是否超出」判断方式。
• 想获取最准确宽度用 getBoundingClientRect().width。
• 布局计算选 offsetWidth，显示判断用 clientWidth。
• 可以搭配 resize-observer 做实时判断适配。