JavaScript通过style属性、classList和getComputedStyle等API动态控制CSS样式：直接修改element.style适用于简单内联样式；推荐用classList切换预定义CSS类；getComputedStyle用于读取最终渲染样式。
JavaScript 通过操作 DOM 元素的 style 属性或 className/classList，就能直接控制 CSS 表现，实现动态样式切换。
直接修改内联样式（element.style）
这是最直观的方式，适用于单次、简单、需要即时生效的样式调整。注意：只能设置内联样式，且属性名使用驼峰写法（如 backgroundColor 而非 background-color）。
element.style.color = 'red';element.style.fontSize = '16px';element.style.display = element.style.display === 'none' ? 'block' : 'none';
⚠️ 注意：style 只读取/写入内联样式，无法获取 CSS 文件或 中定义的值；若想读取计算后样式，需用 getComputedStyle(element)。
切换 CSS 类（className 或更推荐 classList）
把样式逻辑交给 CSS 类，JS 只负责“开关”，更清晰、可维护、支持过渡动画，是推荐做法。
立即学习“Java免费学习笔记（深入）”；
-
element.className = 'active';（覆盖全部类名，慎用） element.classList.add('highlight');element.classList.remove('disabled');element.classList.toggle('collapsed');-
element.classList.contains('error');（用于条件判断）
✅ 示例：按钮点击切换主题色btn.classList.toggle('dark-mode'); 配合 CSS 中 .dark-mode { background: #333; color: white; } 即可生效。
动态插入或修改样式表（
适合运行时生成大量样式规则，比如主题配色、响应式断点注入、UI 组件库的样式隔离等。
- 创建
标签并追加到 - 用
document.styleSheets[0].insertRule(...)向现有样式表插入规则 - 修改
style.textContent替换整块样式
⚠️ 注意：insertRule 在某些浏览器中对跨域样式表有限制；动态样式建议加唯一标识（如 data- 属性），便于后续清理。
读取真实渲染样式（getComputedStyle）
当需要获取元素最终生效的样式（含继承、层叠、媒体查询匹配结果）时，必须用它，而不是 element.style。
const computed = getComputedStyle(element);console.log(computed.width); // 返回 '200px'console.log(computed.getPropertyValue('margin-top')); // 支持短横线写法
? 提示：返回的是只读的 CSSStyleDeclaration 对象，不能直接赋值；常用于动画起始值获取、尺寸计算、暗色模式检测等场景。
