offsetWidth 包含内容宽度、左右内边距和左右边框宽度，不包含外边距，也不受 transform 缩放影响；它与 clientWidth（不含边框）、scrollWidth（含溢出内容）有本质区别，适用于弹窗宽度匹配、裁剪判断等布局测量场景。
offsetWidth 是 JavaScript 中用于获取元素在页面上实际占用的水平空间（包括内容、内边距、边框，但不包括外边距）的只读属性。它返回一个整数，单位为像素（px），反映的是元素渲染后的“占位宽度”。
offsetWidth 包含哪些部分？
它的计算逻辑是：
- 内容宽度（
width） - 左右内边距（
padding-left+padding-right） - 左右边框宽度（
border-left-width+border-right-width）
注意：不包含 margin，也不受 transform 缩放影响（但会受 CSS 缩放如 scale() 影响，取决于浏览器实现；通常建议避免依赖缩放下的 offsetWidth）。
和 clientWidth、scrollWidth 的关键区别
三者常被混淆，核心差异如下：
立即学习“Java免费学习笔记（深入）”；
- clientWidth：只含内容宽 + 内边距，不含边框（即使有边框也不计入）
- scrollWidth：内容实际总宽（含溢出部分），比如内部内容超出容器时，它可能比 offsetWidth 大
- offsetWidth：内容宽 + 内边距 + 边框，是元素“盒子”的完整可见宽度（无滚动条时 ≈ clientWidth + 左右边框）
使用 offsetWidth 的典型场景
它适合用于需要精确布局测量的场合，例如：
- 动态计算弹窗或下拉菜单的默认宽度，使其匹配触发按钮（
dropdown.style.width = trigger.offsetWidth + 'px';） - 判断元素是否被父容器裁剪（对比 offsetWidth 和 parent.clientWidth）
- 实现响应式表格列宽同步（需注意重排时机，建议在
requestAnimationFrame或offsetParent稳定后读取）
需要注意的细节
offsetWidth 是实时计算值，但并非完全“动态响应”：
- 在 DOM 修改后立即读取，可能拿到旧值（浏览器尚未重排）——需确保样式已应用且布局已更新
- 隐藏元素（
display: none）返回0；而visibility: hidden或opacity: 0仍返回正常值 - 行内元素（如
span）若未设置宽高，其 offsetWidth 取决于内容渲染后的实际占位宽度
