1. 三个属性到底在操作什么
client、offset、style这三个词放在一起，几乎每个写过前端的人都在面试题或者实际项目里撞见过。它们看起来都是“获取某个值”，但背后的坐标系、参照物、可读写性完全不同。我见过太多人写拖拽组件时把offsetX和clientX混着用，结果鼠标一动元素就飞了；也见过有人想改元素位置，对着offsetLeft赋值，控制台静默失败还找不到原因。
先把结论摆在最前面：client和offset是读取类属性，返回的是数字（只读）；style是读写类属性，返回的是字符串（可写，但只认内联样式）。这个根本差异决定了它们的使用场景完全不重叠。
具体来说，client系列描述的是元素内容区域相对于自身边框内侧的尺寸和位置，offset系列描述的是元素相对于其偏移父级的尺寸和位置，而style操作的是写在元素style属性里的那部分 CSS 声明。三者分别对应“可视区域”“布局位置”“内联样式”三个维度。
这篇文章适合谁看？如果你是刚接触 DOM 操作的新手，正在被各种Width、Height、Left、Top绕晕，那这篇能帮你把坐标系理清楚。如果你是有一定经验的开发者，但每次写拖拽、滚动监听、动画时还是要翻文档确认用哪个属性，那这篇能帮你建立一套稳定的判断逻辑。我会从坐标系原理讲起，把每个属性的计算规则、边界情况、常见坑点都拆开说，最后给出一套可以直接抄的选型对照表。
需要提前说明的是，不同浏览器对部分属性的实现存在历史差异，尤其是offset系列在早期版本中的表现。本文讨论的是当前主流浏览器（基于 Chromium 内核、Gecko 内核、WebKit 内核的现代版本）的通用行为，如果你需要兼容非常老旧的浏览器，建议在目标环境实测后再做决定。
2. client 系列：可视区域与内容盒的度量
2.1 clientWidth 和 clientHeight 到底量的是什么
clientWidth和clientHeight返回的是元素内容区域加上内边距（padding）的尺寸，单位是像素，取整数值。注意这里有两个关键点：第一，它不包含边框（border）；第二，它不包含外边距（margin）；第三，它不包含滚动条占用的空间（如果有滚动条的话）。
用一个具体的例子来说明。假设有一个div，CSS 如下：
.box { width: 200px; height: 100px; padding: 20px; border: 5px solid #333; margin: 10px; overflow: auto; }这个元素的clientWidth是多少？计算过程是：内容宽度 200px 加上左右 padding 各 20px，等于 240px。边框的 5px 不计入，margin 的 10px 也不计入。如果内容溢出出现了垂直滚动条，滚动条本身会占据内容区域的宽度（通常是 15px 左右，取决于系统和浏览器设置），那么clientWidth会变成 240px 减去滚动条宽度，大约是 225px。
这就是为什么clientWidth常被用来做“可用内容宽度”的判断依据——它反映的是元素内部真正能放内容的横向空间。我在做自适应布局时，经常用clientWidth来判断容器是否窄到需要切换成移动端样式，而不是用offsetWidth，因为后者包含了边框，会让判断阈值产生偏差。
clientHeight的逻辑完全对称：内容高度加上下 padding，不含边框、margin 和水平滚动条高度。对于document.documentElement或document.body，clientHeight通常用来获取视口高度（不含滚动条），这也是为什么很多全屏布局的脚本会读这个值。
2.2 clientLeft 和 clientTop 的冷门用途
clientLeft和clientTop这两个属性存在感很低，但偶尔能救命。它们返回的是元素左边框和上边框的宽度，单位像素。等等，你可能会问：边框宽度不是应该用getComputedStyle读border-left-width吗？没错，但clientLeft有一个特殊行为——如果元素有垂直滚动条且方向是从右往左（RTL）的书写模式，clientLeft会包含滚动条的宽度。
在绝大多数从左到右的布局中，clientLeft就等于左边框宽度，clientTop就等于上边框宽度。我实际用到它们的场景主要是：当元素设置了box-sizing: border-box且需要精确计算内容起始位置时，可以用clientLeft快速拿到边框厚度，而不必去解析计算样式返回的字符串（"5px"这种需要parseFloat）。
注意：
clientLeft和clientTop在元素没有边框时返回 0，但这不代表元素没有偏移。它们只反映边框和滚动条的影响，不反映元素在页面中的位置。
2.3 clientX 和 clientY：鼠标事件里的视口坐标
在鼠标事件对象中，clientX和clientY表示鼠标指针相对于浏览器视口左上角的坐标。视口就是当前可见的页面区域，不包括工具栏、地址栏这些浏览器界面，也不包括页面滚动出去的部分。
这意味着如果你把页面往下滚动了 500px，然后在可视区域顶部点击，clientY返回的是接近 0 的值，而不是 500。这个特性让clientX/clientY非常适合做与滚动位置无关的交互，比如自定义右键菜单的定位——菜单应该出现在鼠标点击的位置，不管页面滚到哪里。
但如果你需要知道鼠标相对于整个文档的位置，就得用pageX/pageY，它等于clientX/clientY加上滚动偏移。我在做画布类应用时踩过这个坑：用clientY记录绘制点，页面一滚动，绘制位置就全偏了。后来统一改成pageY才解决。
3. offset 系列：布局位置与偏移父级
3.1 offsetWidth 和 offsetHeight 的完整盒模型
offsetWidth和offsetHeight返回的是元素的边框盒（border box）尺寸，也就是内容 + padding + border + 滚动条（如果有）。它是最直观的“元素占了多少空间”的度量。
继续用上面那个例子：内容 200px + padding 40px + border 10px = 250px，所以offsetWidth是 250px。如果出现滚动条，滚动条宽度也计入offsetWidth，因为它确实占据了布局空间。
这里有一个容易混淆的点：offsetWidth返回的是布局后的实际尺寸，而不是 CSS 里写的width值。如果元素被 CSS 变换（transform: scale）缩放了，offsetWidth返回的是变换前的布局尺寸，不是视觉上的缩放后尺寸。要拿视觉尺寸，得用getBoundingClientRect()。这个差异在做动画时特别重要——你用offsetWidth算出来的值去设置transform，可能会得到意料之外的结果。
我在做拖拽排序时，经常用offsetWidth来计算占位符的尺寸，因为它稳定反映布局尺寸，不受动画变换干扰。但如果是要做碰撞检测，就得换成getBoundingClientRect()，因为用户看到的是变换后的位置。
3.2 offsetLeft 和 offsetTop 的参照物之谜
offsetLeft和offsetTop返回元素相对于其offsetParent的左上角偏移。这里的关键是搞清楚offsetParent是谁。
offsetParent的判定规则大致是这样的：从当前元素向上遍历 DOM 树，找到第一个满足以下条件之一的祖先元素——position不是static、是td/th/table、或者是body。如果都没有，offsetParent就是null（比如元素或祖先有display: none）。
这意味着如果你给一个元素设置了position: relative，它的所有子元素的offsetParent都会变成它，offsetLeft/offsetTop也就变成了相对于这个父元素的偏移。这个特性被广泛用于拖拽组件的实现：把拖拽容器设为relative，内部元素设为absolute，然后用offsetLeft/offsetTop读取和计算位置。
但这里有个大坑：offsetLeft/offsetTop是只读的。你不能写element.offsetLeft = 100来移动元素，这行代码不会报错，但也不会有任何效果。要移动元素，必须改style.left或者style.transform。我见过不止一个新手在这里卡住，对着不动的元素怀疑人生。
另外，offsetLeft/offsetTop返回的是相对于offsetParent边框内侧的距离，不是相对于 padding 或内容区域。如果offsetParent有边框，计算时要注意这个细节。
3.3 offsetParent 为 null 的几种情况
offsetParent返回null的情况比想象中多，处理不当会导致脚本报错。常见的情况包括：
- 元素自身或任意祖先元素设置了
display: none - 元素是
body或html本身（在某些浏览器中） - 元素是
position: fixed（此时offsetParent为null，因为固定定位相对于视口） - 元素尚未插入 DOM 树
我在写通用工具函数时，会先判断offsetParent是否存在，再决定用哪套坐标计算逻辑。对于position: fixed的元素，offsetLeft/offsetTop的行为在不同浏览器中不一致，最稳妥的做法是直接用getBoundingClientRect()拿视口坐标。
实操心得：如果你需要一套跨场景稳定的坐标获取方案，优先用
getBoundingClientRect()，它返回的是相对于视口的精确浮点数值，不受offsetParent规则影响。offsetLeft/offsetTop更适合在已知offsetParent结构的封闭组件内使用。
4. style 系列：内联样式的读写规则
4.1 style 属性只认内联样式
element.style返回的是一个CSSStyleDeclaration对象，但它只包含写在元素style属性里的样式，不包括来自<style>标签或外部样式表的规则。这是最容易让人困惑的地方。
举个例子：
<style> .box { color: red; } </style> <div class="box" style="font-size: 16px;">内容</div>此时element.style.color返回空字符串""，因为color: red来自样式表，不在内联样式里。而element.style.fontSize返回"16px"，因为它是内联写的。
这个特性导致很多人想用element.style.xxx读取元素的实际样式时拿不到值。正确做法是用getComputedStyle(element)，它返回的是最终计算后的样式，包含所有来源的规则。
但element.style在写的时候非常直接：你给它赋什么值，它就写到内联样式上，优先级高于样式表中的同名规则（除非样式表用了!important）。这也是为什么用 JS 做动画时，直接改element.style.transform或element.style.left能立即生效。
4.2 驼峰命名与短横线命名的转换
element.style的属性名使用驼峰命名，比如backgroundColor、marginTop、borderLeftWidth。而 CSS 里写的是短横线命名background-color、margin-top。如果你非要用短横线，可以用element.style.setProperty('background-color', 'red')，或者element.style['background-color'] = 'red'。
我在实际项目中更倾向于用setProperty，因为它在处理 CSS 自定义属性（--my-var）时是唯一选择，而且语义更清晰。但如果是批量设置普通属性，驼峰写法更简洁：
// 方式一：逐个赋值 el.style.width = '100px'; el.style.height = '50px'; el.style.backgroundColor = '#f00'; // 方式二：cssText 批量覆盖（注意会清空原有内联样式） el.style.cssText = 'width: 100px; height: 50px; background-color: #f00;'; // 方式三：setProperty 逐个设置 el.style.setProperty('width', '100px'); el.style.setProperty('height', '50px');注意：
cssText赋值会完全替换元素的内联样式，之前通过style.xxx设置的值全部丢失。如果元素上还有别的内联样式需要保留，千万别用cssText整体覆盖。
4.3 style 读值的局限性
前面说了style只读内联样式，但即使元素有内联样式，读出来的值也不一定是你想要的格式。比如：
- 颜色值可能被浏览器规范化成
rgb(255, 0, 0)而不是#f00 - 数值可能被加上单位，也可能不加（取决于属性）
auto、inherit这类关键字会原样返回- 简写属性（如
margin）读出来可能是空字符串，因为浏览器内部按展开属性存储
我个人的习惯是：读样式一律用getComputedStyle，写样式才用element.style。这样职责清晰，不会因为内联样式的有无而产生不一致的行为。
5. 三者在实际场景中的选型对照
5.1 尺寸获取：该用 client 还是 offset
判断标准很简单：你要不要边框。
- 如果你要的是“内容能占多少空间”，用
clientWidth/clientHeight - 如果你要的是“元素在布局中占了多少空间”，用
offsetWidth/offsetHeight - 如果你要的是“元素视觉上看起来多大”（考虑 transform 缩放），用
getBoundingClientRect()
我整理了一个对照表，覆盖常见需求：
| 需求场景 | 推荐属性 | 原因 |
|---|---|---|
| 计算容器内可放内容宽度 | clientWidth | 不含边框和滚动条，反映真实内容空间 |
| 计算元素占位尺寸用于布局 | offsetWidth | 含边框和滚动条，反映布局占位 |
| 获取元素视觉尺寸（有缩放） | getBoundingClientRect() | 返回变换后的实际渲染尺寸 |
| 获取视口高度 | document.documentElement.clientHeight | 不含滚动条，稳定可靠 |
| 获取元素相对于父级的位置 | offsetLeft/offsetTop | 相对于 offsetParent，适合封闭组件 |
| 获取元素相对于视口的位置 | getBoundingClientRect() | 浮点精度，不受 offsetParent 影响 |
5.2 位置设置：为什么不能直接改 offset
这是新手最容易犯的错误。offsetLeft、offsetTop、offsetWidth、offsetHeight全部是只读属性，赋值不会报错但也不会生效。要改变元素位置，必须操作style：
// 错误做法：无效 el.offsetLeft = 100; // 正确做法一：改 left/top（需要元素有定位） el.style.position = 'absolute'; el.style.left = '100px'; el.style.top = '50px'; // 正确做法二：改 transform（性能更好，不触发重排） el.style.transform = 'translate(100px, 50px)';从性能角度，transform优于left/top，因为transform不会触发浏览器的重排（reflow），只触发重绘（repaint）甚至只触发合成（composite）。我在做高频动画（比如跟随鼠标移动的元素）时，一律用transform，实测在低端设备上帧率明显更稳。
但transform也有代价：它不影响文档流，元素移动后原来的位置会空出来，周围的元素不会跟着动。如果你需要元素移动后影响布局，还是得用left/top或者margin。
5.3 鼠标坐标：clientX 与 offsetX 的区别
鼠标事件对象上同时存在clientX、pageX、screenX、offsetX等多个坐标属性，这里重点说clientX和offsetX的区别。
clientX：相对于视口左上角offsetX：相对于事件目标元素的 padding 边缘左上角
offsetX在实现“在某个元素内绘制”时非常方便，因为它直接给出了鼠标在元素内部的坐标，不需要自己做减法。但它的兼容性和行为在不同浏览器中曾有差异，尤其是当鼠标移动到子元素上时，offsetX的参照物可能变成子元素。我在做画板功能时，最终选择了用clientX减去getBoundingClientRect().left来手动计算，虽然多写一行，但行为完全可控。
6. 常见问题与排查技巧实录
6.1 为什么 offsetLeft 一直是 0
这是最高频的问题。原因通常有三个：
第一，元素的offsetParent是body或html，而元素本身就在页面左上角附近，所以偏移接近 0。解决方法是给父容器加position: relative，让offsetParent变成父容器。
第二，元素或祖先有display: none，此时offsetParent为null，offsetLeft返回 0。需要先让元素可见再读取。
第三，元素是position: fixed，此时offsetParent为null，offsetLeft的行为不可靠。改用getBoundingClientRect()。
6.2 style 设置了值但页面没变化
几种可能：
- 值缺少单位。
el.style.width = 100是无效的，必须写'100px'。但el.style.opacity = 0.5不需要单位，el.style.zIndex = 10也不需要。 - 属性名写错了。CSS 里是
float，但element.style.float在某些浏览器中要用cssFloat。现代浏览器两者都支持，但保险起见可以用setProperty('float', 'left')。 - 被
!important覆盖了。内联样式默认优先级很高，但样式表中的!important规则能压过它。此时需要用el.style.setProperty('width', '100px', 'important')。 - 元素有
display: none或者不在 DOM 中，设置样式不报错但看不到效果。
6.3 clientWidth 和 offsetWidth 差多少
差值等于左右边框宽度之和加上垂直滚动条宽度（如果有）。你可以用这个差值反推边框厚度：
const borderWidth = el.offsetWidth - el.clientWidth - scrollbarWidth;如果没有滚动条，offsetWidth - clientWidth就是左右边框总宽。这个技巧在我需要动态计算边框但不方便读计算样式时很好用。
6.4 滚动条宽度怎么获取
滚动条宽度因浏览器和操作系统而异，没有直接的 API。常用做法是创建一个带滚动条的元素，测量其offsetWidth和clientWidth的差值：
function getScrollbarWidth() { const outer = document.createElement('div'); outer.style.cssText = 'width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px;'; document.body.appendChild(outer); const width = outer.offsetWidth - outer.clientWidth; document.body.removeChild(outer); return width; }这个值在同一个环境下是固定的，可以缓存起来复用，不必每次计算。
6.5 问题速查表
| 现象 | 可能原因 | 排查方向 |
|---|---|---|
| offsetLeft 始终为 0 | offsetParent 为 null 或 body | 检查祖先定位和 display |
| style 赋值无效 | 缺单位、属性名错、被 important 覆盖 | 检查值格式和计算样式 |
| clientWidth 比预期小 | 有滚动条占用空间 | 检查 overflow 设置 |
| offsetWidth 比 CSS width 大 | 包含了 padding 和 border | 确认 box-sizing 和盒模型 |
| 鼠标坐标偏移 | 用了 clientX 但需要 pageX | 检查是否需要加滚动偏移 |
| transform 后 offsetWidth 不变 | offsetWidth 返回布局尺寸 | 改用 getBoundingClientRect |
7. 一套稳定的坐标与尺寸获取方案
经过上面这些拆解，我把自己在项目中反复验证过的一套方案整理出来，你可以直接拿去用。
获取元素尺寸时，先明确你要的是哪种尺寸。要内容空间用clientWidth/clientHeight，要布局占位用offsetWidth/offsetHeight，要视觉渲染尺寸用getBoundingClientRect()。这三者没有优劣，只有场景匹配。
获取元素位置时，如果元素在封闭的定位容器内，用offsetLeft/offsetTop最直接。如果需要跨容器、跨滚动、考虑变换，一律用getBoundingClientRect()配合window.scrollX/scrollY换算成文档坐标。
设置元素位置时，记住offset系列只读，必须走style。高频动画用transform，需要影响布局用left/top或margin。
读取样式时，element.style只读内联，getComputedStyle读最终值。写样式时，element.style直接有效，注意单位和属性名格式。
最后分享一个我踩过多次坑之后养成的习惯：任何涉及坐标计算的代码，先在页面滚动到中间位置时测试一遍，再在缩放浏览器窗口后测试一遍。这两个操作能暴露绝大多数坐标系混淆的问题。很多 bug 不是逻辑错，而是参照物选错了，而参照物的差异只有在页面状态变化时才会显现。
