clientWidth vs offsetWidth

一、共同点

先明确两者的核心共性，这是理解区别的基础：

1. 都是 DOM 元素的只读属性，无法手动赋值修改；
2. 都返回数字类型 的像素值（不带 px 单位）；
3. 都受元素显示状态影响：如果元素 display: none，两者都返回 0；
4. 对内联元素（如默认的 <span>）无效：内联元素不具备盒模型的宽高属性，两者均返回 0（除非设置 display: inline-block/block）。

二、核心区别（最关键）

两者的核心差异在于宽度计算范围，先通过表格直观对比，再结合盒模型解释：

属性	计算范围（核心）	是否包含滚动条	是否包含 border	是否包含 margin
clientWidth	内容区（content） + 左右内边距（padding）	不包含	不包含	不包含
offsetWidth	内容区 + 左右 padding + 左右 border	包含（垂直滚动条宽度）	包含	不包含

可视化盒模型解释

元素的盒模型结构（从外到内）：
margin → border → padding → content

• clientWidth：只覆盖 padding + content 区域（元素内部可渲染内容的宽度）；
• offsetWidth：覆盖 border + padding + content 区域（元素整体占据的可见宽度）；
• 两者都不包含 margin（margin 是元素与其他元素的间距，不属于元素自身宽度）。

代码示例：直观验证差异

先写一个带边框、内边距、滚动条的元素，再获取两个属性值：

<!-- 测试元素：宽200px，左右padding各10px，左右border各5px，垂直滚动条 -->
<div id="box" style="
  width: 200px;
  height: 100px;
  padding: 10px; /* 上下左右各10px */
  border: 5px solid #000; /* 上下左右各5px */
  margin: 8px; /* 上下左右各8px（不影响宽度计算） */
  overflow-y: scroll; /* 垂直滚动条（宽度约17px） */
">
  测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容
</div>

<script>
  const box = document.getElementById('box');
  
  // 计算逻辑：200(content) + 10*2(padding) = 220
  console.log('clientWidth:', box.clientWidth); // 输出：220（不含border、滚动条）
  
  // 计算逻辑：200 + 10*2 + 5*2 = 230（垂直滚动条不影响宽度，若为水平滚动条则包含）
  console.log('offsetWidth:', box.offsetWidth); // 输出：230（含border）
</script>

特殊场景：水平滚动条的影响

如果元素有水平滚动条 （overflow-x: scroll），clientWidth 会减去滚动条宽度 （因为滚动条占据了内容区空间），而 offsetWidth 仍包含滚动条宽度：

<div id="box2" style="
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
  overflow-x: scroll; /* 水平滚动条（宽度约17px） */
  white-space: nowrap; /* 强制不换行，触发滚动条 */
">
  测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
</div>

<script>
  const box2 = document.getElementById('box2');
  // 200+20 - 17（滚动条宽度）= 203
  console.log('clientWidth:', box2.clientWidth); 
  // 200+20+10 = 230（包含滚动条宽度）
  console.log('offsetWidth:', box2.offsetWidth); 
</script>

三、典型使用场景

• clientWidth：适合获取元素"可操作内容区"宽度，比如：

  1. 计算滚动进度：滚动比例 = scrollLeft / (scrollWidth - clientWidth)；
  2. 适配元素内部内容的尺寸（比如动态调整子元素宽度）。

• offsetWidth：适合获取元素"整体占位宽度"，比如：

  1. 布局计算（比如计算元素在页面中实际占据的宽度）；
  2. 元素定位偏移（比如拖拽元素时基于 offsetWidth 计算位置）。

总结

1. 核心计算规则 ：clientWidth = 内容宽 + 左右padding；offsetWidth = 内容宽 + 左右padding + 左右border（有滚动条时，offsetWidth 包含滚动条宽度，clientWidth 不包含）；
2. 关键差异：offsetWidth 包含 border 和滚动条，clientWidth 仅包含内容+内边距，两者都不包含 margin；
3. 特殊情况：display:none/内联元素时，两者均返回 0，且都是只读属性。