JavaScript通过DOM操作style属性或classList可实时影响渲染，触发样式重计算与重绘；style用驼峰式设置内联样式，优先级最高；classList更推荐用于复用CSS；getComputedStyle获取最终计算样式；样式变更启动浏览器渲染流水线。
JavaScript 通过 DOM 获取页面元素后，直接操作其 style 属性或 class 列表，就能实时影响浏览器渲染效果。这种交互不是“写完就结束”，而是触发浏览器的样式重计算（recalc）与重绘（repaint），最终在屏幕上呈现变化。
style 属性直接控制内联样式
每个 DOM 元素都有一个 style 属性，它是一个 CSSStyleDeclaration 对象，映射 HTML 中的 style 内联样式。修改它会立即生效，且优先级高于外部样式表和 class 定义。
- 用点语法设置单个样式：
element.style.color = 'red'、element.style.fontSize = '16px' - 注意属性名是驼峰式（如
backgroundColor而非background-color） - 批量设置可用
element.style.cssText = 'color: blue; font-size: 18px;'，但会覆盖原有内联样式
className 与 classList 管理 CSS 类
比起硬编码 style，更推荐通过添加、移除 class 来复用 CSS 规则，保持结构与样式的分离。
-
element.className = 'active highlight'—— 全量替换，容易误删其他类 -
element.classList.add('active')、.remove('disabled')、.toggle('hidden')、.contains('error')—— 安全、语义清晰 -
classList支持多个操作链式调用：el.classList.add('a').remove('b').toggle('c')
获取计算后的样式：getComputedStyle()
当需要读取元素最终生效的样式（包括继承值、媒体查询匹配结果、浏览器默认值等），不能依赖 style 属性——它只反映内联样式。必须用 window.getComputedStyle(element)。
立即学习“Java免费学习笔记（深入）”；
- 返回只读的 CSSStyleDeclaration 对象，例如：
getComputedStyle(el).fontSize返回"16px" - 可用于判断响应式断点是否生效、检测动画是否完成、获取实际宽高（含 padding/border）
- 注意：该方法不触发重排，但频繁调用仍需谨慎
样式变更如何触发浏览器渲染
DOM 样式修改本身不直接“画图”，而是启动浏览器的渲染流水线：
- 修改
style或className→ 触发样式重计算（Recalculate Styles） - 若影响几何属性（如 width、left、transform），可能触发布局（Layout / Reflow）
- 最后触发绘制（Paint）和合成（Composite），把像素送到屏幕
- 为避免强制同步布局，应避免在循环中反复读写 offsetWidth/scrollTop 等属性
