DOM获取元素尺寸的属性有哪些？```markdown # DOM获取元素尺寸的属性详解 ## 1. 基础尺寸属性 #

# DOM获取元素尺寸的属性详解

## 1. 基础尺寸属性

### clientWidth/clientHeight
- 获取元素可视区域尺寸（包含padding但不包含border、margin和滚动条）
- 计算公式：width + padding-left + padding-right
- 示例：
```javascript
const box = document.getElementById('box');
console.log(box.clientWidth); // 输出元素可视宽度

offsetWidth/offsetHeight

获取元素布局尺寸（包含padding、border和滚动条，但不包含margin）
计算公式：width + padding + border + 垂直滚动条宽度
示例：

console.log(box.offsetWidth); // 输出元素布局宽度

scrollWidth/scrollHeight

获取元素内容总尺寸（包含隐藏部分和padding，但不包含border和margin）
当内容未溢出时等于clientWidth/clientHeight
示例：

console.log(box.scrollWidth); // 输出内容总宽度

2. 位置相关属性

getBoundingClientRect()

返回包含完整尺寸和位置信息的DOMRect对象
包含width/height（包含padding和border）
包含left/top/right/bottom相对于视口的位置
示例：

const rect = box.getBoundingClientRect();
console.log(rect.width); // 元素总宽度
console.log(rect.left);  // 距离视口左侧距离

offsetLeft/offsetTop

获取元素相对于offsetParent的偏移位置
示例：

console.log(box.offsetLeft); // 水平偏移量

3. 窗口相关属性

window.innerWidth/innerHeight

获取浏览器窗口可视区域尺寸
包含滚动条宽度
示例：

console.log(window.innerWidth); // 窗口可视宽度

document.documentElement.clientWidth/clientHeight

获取HTML文档可视区域尺寸
不包含滚动条宽度
示例：

console.log(document.documentElement.clientWidth);

4. 特殊场景属性

scrollLeft/scrollTop

获取/设置元素滚动位置
示例：

console.log(box.scrollLeft); // 水平滚动距离
box.scrollTop = 100; // 设置垂直滚动

element.style.width/height

获取/设置内联样式尺寸
仅能获取通过style属性设置的尺寸
示例：

box.style.width = '200px'; // 设置宽度
console.log(box.style.width); // 获取宽度

5. 现代API

ResizeObserver

监听元素尺寸变化的现代API
示例：

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log(entry.contentRect.width);
  }
});
observer.observe(box);

6. CSSOM视图模式

window.getComputedStyle()

获取元素最终计算的样式值
示例：

const style = window.getComputedStyle(box);
console.log(style.width); // 计算后的宽度值

最佳实践建议

常规布局测量优先使用getBoundingClientRect()
需要包含滚动条时使用offsetWidth/offsetHeight
响应式场景使用ResizeObserver
避免频繁读取尺寸属性（会导致回流）
动画场景应将尺寸读取和写入分开处理

性能注意事项

尺寸读取会强制触发回流（layout thrashing）
批量读取尺寸属性可减少回流次数
使用transform代替尺寸变化可获得更好性能
隐藏元素（display:none）时无法获取准确尺寸