一文整理下所有关于dom 尺寸的属性、方法

有没有人跟我一样，根本记不清这些api或者记得很乱的？网上找了下，似乎也没找到类似的总结的文章，所以就花时间整理了下，大家有需要时候翻下这篇即可。话不多说，直接开始

一、元素盒模型相关属性

这些属性直接反映了元素在页面上的可视尺寸或与滚动相关的尺寸

属性	描述
`element.offsetWidth`	元素的布局宽度（包括：内容宽度 + 左右内边距 + 左右边框 + 垂直滚动条宽度（如果有））。返回值为整数，单位像素。
`element.offsetHeight`	元素的布局高度（包括：内容高度 + 上下内边距 + 上下边框 + 水平滚动条高度（如果有））。返回值为整数，单位像素。
`element.clientWidth`	元素的可见宽度（包括：内容宽度 + 左右内边距，但不包括边框、滚动条和外边距）。返回值为整数，单位像素。
`element.clientHeight`	元素的可见高度（包括：内容高度 + 上下内边距，但不包括边框、滚动条和外边距）。返回值为整数，单位像素。
`element.scrollWidth`	元素内容的实际宽度，包括看不见的溢出部分（内容宽度 + 左右内边距），不包含边框和滚动条。若内容未溢出，则等于 `clientWidth`。
`element.scrollHeight`	元素内容的实际高度，包括看不见的溢出部分（内容高度 + 上下内边距），不包含边框和滚动条。若内容未溢出，则等于 `clientHeight`。
`element.scrollLeft`	元素水平滚动条当前的滚动偏移量（相对于左侧），单位像素。可读可写，用于控制或获取当前滚动位置。
`element.scrollTop`	元素垂直滚动条当前的滚动偏移量（相对于顶部），单位像素。可读可写，用于控制或获取当前滚动位置。

二、视口和文档尺寸

用于测量整个页面或视口（浏览器可视区域）的尺寸。

属性／方法	描述
`window.innerWidth`	浏览器窗口的视口宽度（包括滚动条），单位像素。
`window.innerHeight`	浏览器窗口的视口高度（包括滚动条），单位像素。
`document.documentElement.clientWidth`	`<html>` 元素的可视宽度（不包括滚动条），通常等于视口宽度。
`document.documentElement.clientHeight`	`<html>` 元素的可视高度（不包括滚动条），通常等于视口高度。
`document.documentElement.scrollWidth`	整个文档的内容宽度，包括可滚动区域，不包含滚动条。
`document.documentElement.scrollHeight`	整个文档的内容高度，包括可滚动区域，不包含滚动条。
`document.body.scrollWidth`	`<body>` 元素的内容宽度，通常等于文档宽度。
`document.body.scrollHeight`	`<body>` 元素的内容高度，通常等于文档高度。

三、精确定位和尺寸测量方法

方法	描述
`element.getBoundingClientRect()`	返回一个 `DOMRect` 对象，包含元素相对于视口（viewport）的位置和尺寸：

x/left、y/top：元素边框盒（border box）左上角相对于视口的坐标。
width、height：元素边框盒的宽度和高度（可能为小数）。
right、bottom：等于 left + width、top + height。
DOMRectList.fromRect() / new DOMRect() | 用于创建或转换矩形对象，较少直接使用，一般配合 getClientRects()。
element.getClientRects() | 返回一个 DOMRectList，列出元素中每一行（inline 元素）或每个盒子（块级元素可能只有一个）的边框盒矩形。用于精细测量跨行或多盒布局的元素。

区别：

getBoundingClientRect() 给出整个元素的外接矩形。
getClientRects() 则给出每一行/每个盒子的矩形，适合精细布局场景。

四、样式计算相关

有时我们需要获取元素通过 CSS 计算后的样式值，如 width、height、padding、border 等。

ts 复制代码

const style = window.getComputedStyle(element);
const width = style.width;     // 内容宽度（不含 padding、border），带单位字符串
const height = style.height;   // 内容高度（不含 padding、border），带单位字符串
const paddingLeft = style.paddingLeft; // 带单位字符串
const borderTopWidth = style.borderTopWidth; // 带单位字符串

注意：getComputedStyle 返回的所有数值都是字符串（带单位），如果需要数值，需要 parseFloat(style.width)。

五、使用场景及注意事项

布局测量 vs. 样式值
- offset*、client*、scroll*、getBoundingClientRect() 等返回的是布局计算后 的像素值，通常为数字（getBoundingClientRect() 返回小数）。
- getComputedStyle 返回的是CSS 计算后的属性值，带单位字符串，代表"样式"而非最终布局尺寸。
触发回流（Reflow）
- 访问 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight、getBoundingClientRect() 等，会强制浏览器执行回流，重新计算布局，影响性能。
- 在同一帧内，尽量合并多次读取与写入操作，或使用 requestAnimationFrame、ResizeObserver 来优化。
滚动条影响
- offsetWidth 包含滚动条宽度；clientWidth 不包含；而 window.innerWidth 则包含。
- 测量可视区域时，根据是否需要考虑滚动条选择合适的属性。
跨浏览器差异
- 大部分现代浏览器都遵循相同标准，但在极少数老旧浏览器（IE8 及以下）中，部分属性或方法行为略有差异，应做兼容处理或使用 polyfill。

总结

类别	属性/方法	包含内容	单位/类型	触发回流	可写性
盒模型	`offsetWidth`	内容 + padding + border + 滚动条	整数(px)	是	只读
	`offsetHeight`	内容 + padding + border + 滚动条	整数(px)	是	只读
	`clientWidth`	内容 + padding	整数(px)	是	只读
	`clientHeight`	内容 + padding	整数(px)	是	只读
滚动	`scrollWidth`	内容 + padding	整数(px)	是	只读
	`scrollHeight`	内容 + padding	整数(px)	是	只读
	`scrollLeft`	---	整数(px)	否	读/写
	`scrollTop`	---	整数(px)	否	读/写
视口/文档	`window.innerWidth`	视口宽度（含滚动条）	整数(px)	否	只读
	`window.innerHeight`	视口高度（含滚动条）	整数(px)	否	只读
	`documentElement.clientWidth`	`<html>` 可视宽度（不含滚动条）	整数(px)	否	只读
	`documentElement.clientHeight`	`<html>` 可视高度（不含滚动条）	整数(px)	否	只读
	`documentElement.scrollWidth`	文档内容宽度	整数(px)	否	只读
	`documentElement.scrollHeight`	文档内容高度	整数(px)	否	只读
定位/测量	`getBoundingClientRect()`	边框盒位置 & 大小（小数）	`DOMRect`	是	只读
	`getClientRects()`	每行/盒子边框盒矩形列表	`DOMRectList`	是	只读
样式	`getComputedStyle()`	CSS 计算后所有样式值（带单位字符串）	`CSSStyleDeclaration`	否	只读