offsetWidth和offsetHeight包含内容宽度、内边距和左右/上下边框宽度，不包括外边距和滚动条；offsetWidth = width + padding-left + padding-right + border-left-width + border-right-width。
offsetWidth 和 offsetHeight 本身就是获取**包含内容区、内边距（padding）和边框（border）** 的元素总宽高，不包括外边距（margin）。所以你不需要额外操作，直接读取即可——它们天然就“包含边框”。
它们到底包含哪些部分？
以 offsetWidth 为例（offsetHeight 同理）：
- 内容宽度（
width） - 左右内边距（
padding-left + padding-right） - 左右边框宽度（
border-left-width + border-right-width） - 不包含：外边距（
margin）、滚动条（除非它属于布局一部分，如强制出现的垂直滚动条会挤占内容宽度，此时 offsetWidth 会反映该影响）
注意几个常见情况
这些细节容易导致“明明写了 border 却没看到值变化”：
-
边框为 0 或 transparent：即使 CSS 写了
border: 1px solid transparent，只要实际渲染的 border 宽度是 0（比如border: none或未生效的样式），就不会计入 -
元素未渲染或 display: none：此时
offsetWidth/Height返回 0；可用getComputedStyle配合visibility: hidden; position: absolute;等方式临时测量（需谨慎） - box-sizing: border-box：不影响 offsetWidth 的结果——它始终是渲染后的总视觉宽高，与 box-sizing 的计算逻辑无关
-
字体加载、图片加载中：可能造成尺寸波动，建议在
DOMContentLoaded或img.onload后读取
简单验证方法
快速确认是否包含边框：
立即学习“Java免费学习笔记（深入）”；
const el = document.querySelector('#myDiv');
console.log('offsetWidth:', el.offsetWidth);
console.log('clientWidth:', el.clientWidth); // 不含 border
console.log('borderLeft + borderRight:',
parseInt(getComputedStyle(el).borderLeftWidth) +
parseInt(getComputedStyle(el).borderRightWidth)
);
// 正常情况下：offsetWidth ≈ clientWidth + 左右边框宽度之和
替代方案？什么时候不用 offsetWidth/Height？
如果需要更精确控制或动态响应尺寸变化：
- 需要监听尺寸变化 → 用 ResizeObserver（现代标准，推荐）
- 需要排除滚动条影响 → 结合
clientWidth和scrollWidth判断 - 服务端渲染或 SSR 场景 → 无法使用 offsetWidth（无 DOM），需用其他策略（如 CSS 自定义属性 + JS 注入）
