JavaScript动态改样式有三条核心路径：直接修改元素style对象、切换className、操作CSSStyleSheet规则；应避免innerHTML写style标签或拼字符串，style只影响内联样式且需驼峰命名、带单位（0除外），批量设置推荐Object.assign；classList切换预设类名是日常主力，支持动画与复用；CSSStyleSheet适用于主题切换等全局场景，需注意跨域限制与清空cssText等隐性坑。
JavaScript 动态改样式，核心就三条路：改元素的 style 对象、切换 className、操作 CSSStyleSheet 规则。别碰 innerHTML 写 style 标签或拼字符串，那是在给自己埋雷。
直接改 style 属性最简单，但只适合单次、少量变更
适用于按钮点击变色、拖拽时临时加 transform、表单校验实时标红等场景。注意 CSS 属性名要转成驼峰式：background-color → backgroundColor，font-size → fontSize。
常见坑：
-
style只读取和设置「内联样式」，不会反映 CSS 文件或<style>里的规则 - 设值必须带单位（
element.style.width = "200px"），数值 0 除外（opacity: 0合法，top: 0也合法） - 批量设置推荐用
Object.assign(element.style, { opacity: 0.5, transform: "scale(0.95)" })，比连写三行.style.xxx =干净
用 classList 切换预设类名，才是日常主力
绝大多数动态样式变化，都应该提前在 CSS 里写好类（比如 .is-loading、.theme-dark），JS 只负责开关。这样可维护、可复用、支持 CSS 过渡动画，还避免 JS 里硬编码颜色/尺寸。
立即学习“Java免费学习笔记（深入）”；
实操要点：
- 增删单个类：
el.classList.add("active")/el.classList.remove("disabled") - 切换布尔状态：
el.classList.toggle("expanded", isOpen)—— 第二个参数决定是否强制添加或移除 - 一次处理多个类：
el.classList.add("a", "b", "c")，或用展开运算符el.classList.add(...classesArray) - 检查是否存在：
el.classList.contains("error")，别用indexOf或正则去字符串匹配className
需要全局生效或运行时生成规则？操作 CSSStyleSheet
比如主题切换时批量重写颜色变量、图表库根据数据范围动态生成柱状图高度对应的 class、或者做 CSS-in-JS 的轻量实现。这时得动真格的样式表。
关键步骤：
- 先获取目标 sheet：
document.styleSheets[0]或通过document.querySelector("style[data-id='dynamic']").sheet - 插入新规则：
sheet.insertRule(".new-rule { color: red; }", sheet.cssRules.length)—— 第二个参数是插入位置索引 - 删除规则：
sheet.deleteRule(index)，得自己记下插入时返回的索引或遍历sheet.cssRules找匹配项 - 注意跨域限制：如果样式表来自外域，
cssRules会是空的，且insertRule报错
别踩这些隐性坑
有些问题不报错，但效果诡异：
- 用
style.cssText = "color:red; font-size:14px"会**清空所有已有内联样式**，不是追加 -
getComputedStyle(el).color返回的是解析后的值（如rgb(255, 0, 0)），不是原始 CSS 值，也不能用来反向写回style - 服务端渲染（SSR）页面中，首次 JS 执行前 DOM 已存在，但
style或class可能已被服务端设好，别假设初始状态为空 - Web Components 里 Shadow DOM 的样式隔离会让
querySelector找不到内部元素，得用shadowRoot.querySelector
