一、CSSOM 核心概念与架构
CSSOM（CSS 对象模型）是浏览器提供的关键 API，用于操作样式表和获取元素布局信息。它分为两个核心部分：
- CSSOM 本体：管理样式表和规则
- CSSOM View：处理元素视图和布局
与 DOM 的分工：
- DOM：管理文档结构和语义
- CSSOM：管理样式表现和布局信息（）
二、样式表操作：动态控制 CSS 规则
1. 样式表管理
// 获取所有样式表
const stylesheets = document.styleSheets;// 插入新规则
stylesheets[0].insertRule('p { color: red; }', 0);// 修改规则样式
const rule = stylesheets[0].cssRules[0];
rule.style.color = 'blue';
2. 计算样式获取
// 获取最终计算样式
const computedStyle = window.getComputedStyle(element, ':before');
console.log(computedStyle.backgroundColor);
三、布局信息获取：精准定位元素
1. 全局尺寸与视口控制
关键属性：
// 视口尺寸
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;// 设备像素比
const dpr = window.devicePixelRatio;
2. 元素布局计算
核心方法对比：
| 方法类型 | 描述 | 返回值类型 |
|---|---|---|
getClientRects() | 所有盒模型矩形 | DOMRectList |
getBoundingClientRect() | 包含所有盒的包裹矩形 | DOMRect |
代码示例：
const rect = element.getBoundingClientRect();
console.log(`X: ${rect.left}, Y: ${rect.top}`);
console.log(`Width: ${rect.width}, Height: ${rect.height}`);
四、滚动控制与性能优化
1. 视口滚动操作
// 滚动到指定位置
window.scrollTo({ top: 100, behavior: 'smooth' });// 监听滚动事件
document.addEventListener('scroll', () => {console.log(`Scroll Y: ${window.scrollY}`);
});
2. 元素滚动控制
// 元素滚动
element.scrollIntoView({ block: 'start' });// 滚动事件监听
element.addEventListener('scroll', (e) => {console.log(`Element Scroll Top: ${e.target.scrollTop}`);
});
五、实践案例：绘制页面布局轮廓
<canvas id="layoutCanvas"></canvas><script>const canvas = document.getElementById('layoutCanvas');const ctx = canvas.getContext('2d');const elements = document.querySelectorAll('*');ctx.strokeStyle = 'rgba(255, 0, 0, 0.3)';elements.forEach(element => {const rect = element.getBoundingClientRect();ctx.strokeRect(rect.left, rect.top, rect.width, rect.height);});
</script>
六、性能优化策略
1. 批量布局读取
// 反模式
element.style.width = '100px';
const height = element.offsetHeight; // 强制同步布局// 优化模式
element.style.cssText = 'width: 100px; height: 200px';
2. 避免布局抖动
// 集中读取布局信息
const left = element.offsetLeft;
const top = element.offsetTop;
// 批量写入样式
element.style.left = left + 10 + 'px';
element.style.top = top + 10 + 'px';
七、常见问题与解决方案
Q1：如何获取元素相对于文档的位置？
function getElementPosition(element) {const rect = element.getBoundingClientRect();return {x: rect.left + window.scrollX,y: rect.top + window.scrollY};
}
Q2：为什么offsetWidth与getBoundingClientRect().width不同？
offsetWidth包含边框和滚动条getBoundingClientRect().width仅内容宽度（）
Q3：如何处理高 DPR 屏幕？
// 绘制2倍高清图形
const dpr = window.devicePixelRatio;
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
八、总结
CSSOM API 是前端开发中获取布局信息和控制样式的核心工具。通过合理使用getBoundingClientRect、getComputedStyle等方法，开发者可以实现精准的视觉效果和性能优化。下一讲将深入探讨 JavaScript 词法分析与作用域机制。