DOM节点与样式联动需协同操作节点和影响样式：优先用classList控制预设样式，动态计算时才用element.style，读取真实值用getComputedStyle，批量操作注意DOM读写性能优化。
DOM 节点与样式的联动，核心在于“操作节点”和“影响样式”两个动作的协同：改节点结构或属性，会触发样式重计算；改样式（尤其是内联样式），又会即时反映在节点上。关键不是孤立写 element.style.color = 'red'，而是理解何时该改 class、何时该动 style、怎样读取真实生效值。
改样式优先用 classList，而非直接操作 style
直接赋值 element.style.xxx 会写死内联样式，破坏 CSS 层叠逻辑，也难维护。推荐用 classList 控制预设样式：
- 添加类：
element.classList.add('active') - 移除类：
element.classList.remove('disabled') - 切换开关：
element.classList.toggle('hidden') - 批量操作：
element.classList.replace('old', 'new')或element.className = 'a b c'（慎用，会覆盖全部）
这样既保持样式定义在 CSS 文件中，又能通过 JS 灵活控制状态，也方便配合 transition 动画。
需要动态计算值时才用 element.style
比如拖拽过程中实时更新 left/top，或根据数据生成宽度百分比，这时必须用 style：
- 注意驼峰命名：
box.style.backgroundColor（不是background-color） - 单位别漏：数值后加
'px'、'%'等，box.style.width = '200px' - 内联样式优先级高，但会被
!important覆盖——开发中尽量避免在 CSS 里写!important，否则 JS 无法干预
读取真实渲染样式要用 getComputedStyle
element.style.xxx 只返回内联设置的值，查不到 CSS 文件或浏览器默认样式。要获取当前实际生效的值，必须用：
-
getComputedStyle(element).width（返回如"200px"） - 第二个参数通常为
null，查伪元素时才填':before'等字符串 - 兼容旧 IE 可封装函数：
element.currentStyle ? element.currentStyle.width : getComputedStyle(element).width
适合做尺寸判断、动画起始值获取、响应式逻辑分支等场景。
批量操作注意 DOM 读写性能
频繁读写样式会触发浏览器反复重排重绘。优化原则是：
- 读操作集中做（比如先读宽高，再统一算，最后一次性写）
- 写操作尽量合并（多个
style.xxx = yyy比多次单独赋值快） - 大量节点插入用
DocumentFragment，避免逐个 append 导致多次回流 - 样式变更后需强制重绘？极少需要，一般浏览器自动处理；真有需求可用
offsetHeight触发重排
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
