最推荐用 classList 控制预定义类，其次用 CSS 变量配合 setProperty；直接改 element.style 仅适用于极少数实时场景。它仅覆盖内联样式、需驼峰命名、单位不可省略，且无法覆盖 !important 或触发重排优化。
直接改 element.style 是最常用也最容易出错的方式——它只能覆盖内联样式，且属性名要转成驼峰（比如 background-color → backgroundColor），稍不注意就失效。
用 style 对象设置单个样式属性
适用于快速调试或只改一两个值的场景。注意：它不会影响 CSS 类里的样式，也不会触发重排优化。
-
element.style.color = "red"有效；element.style["background-color"] = "blue"无效（必须用驼峰） - 数值单位不能省略：
element.style.width = "200px"✅，element.style.width = 200❌（会被忽略） - 设置
display: none后，再设display: block不会恢复原始值（比如原来是flex），得手动记或用getComputedStyle
批量设置样式：用 Object.assign 或循环赋值
避免重复写 .style.xxx = yyy，但依然受限于内联样式优先级，无法覆盖 !important 或高权重选择器。
Object.assign(element.style, { opacity: "0.5", transform: "scale(0.9)" })- 属性名仍是驼峰：
fontFamily、zIndex、marginLeft - 不推荐在循环中频繁设置多个样式，可能触发多次重排；应合并为一次操作
切换 CSS 类比直接改 style 更可靠
绝大多数动态样式需求，应该优先用 classList 控制预定义类，而不是手拼样式字符串。
立即学习“Java免费学习笔记（深入）”；
-
element.classList.add("active")、element.classList.toggle("hidden") - 类名语义清晰，便于复用和维护；样式逻辑集中在 CSS 文件里，JS 只管状态
- 避免因 JS 覆盖导致样式难以调试——比如你删了某个 class，但
style还残留着旧值 - 如果必须动态生成样式（如主题色），用
document.documentElement.style.setProperty("--primary-color", "#3b82f6")配合 CSS 变量更可控
读取真实生效的样式要用 getComputedStyle
element.style 只返回内联样式，想拿到最终渲染值（比如继承的 color、媒体查询生效后的 width），必须用这个 API。
const computed = getComputedStyle(element); console.log(computed.fontSize);- 返回的是只读的
CSSStyleDeclaration，不能直接赋值 - 注意性能：频繁调用可能触发强制同步布局（forced layout），尤其在循环里要缓存结果
- 它返回的值总是带单位（如
"16px"），计算前需用parseFloat提取数字
真正难的不是“怎么改”，而是判断该不该改——多数时候，样式变更本质是状态变更，应该由 class 控制；只有极少数场景（如拖拽实时缩放、动画中间帧）才需要直操作 style。别让 JS 承担本该由 CSS 解决的问题。
