JavaScript操作CSS核心是通过style属性改内联样式或classList控制类名；内联样式需驼峰命名且优先级最高，classList更推荐以实现关注点分离；读取计算样式须用getComputedStyle。
JavaScript操作CSS的核心是通过DOM元素的style属性修改内联样式，或通过className/classList控制类名，从而动态改变外观。关键在于选对方法、注意优先级、避免硬编码。
直接修改内联样式（style属性）
适用于简单、一次性、需要精确控制的样式变更，比如动画起始位置、临时高亮等。所有CSS属性需转为驼峰命名（如background-color → backgroundColor），且只影响style属性，不覆盖外部CSS规则。
- 用
element.style.property = value赋值，例如：box.style.backgroundColor = 'lightblue'; - 删除某条内联样式：设为空字符串，如
box.style.opacity = ''; - 批量设置可用
Object.assign(element.style, { width: '200px', transform: 'scale(1.2)' })
切换和管理CSS类名（推荐方式）
更符合关注点分离原则，便于复用样式、维护主题、配合CSS过渡/动画。优先使用classList API，它比操作className字符串更安全可靠。
-
element.classList.add('active')— 添加类（重复添加无副作用） -
element.classList.remove('hidden')— 移除类 -
element.classList.toggle('collapsed')— 切换存在状态 -
element.classList.contains('error')— 判断是否含有某类，适合条件逻辑 - 一次操作多个类：
element.classList.add('a', 'b'); element.classList.remove('c', 'd');
注意事项与常见陷阱
动态样式生效受CSS层叠优先级影响，内联样式（style） > ID选择器 > 类选择器 > 元素选择器。若外部CSS用了!important，JS无法直接覆盖（除非也加!important，但不推荐）。
- 读取计算后样式要用
getComputedStyle(element).propertyName，不能直接读style（后者只返回内联值） - 修改
style.cssText会**完全替换**整个内联样式，慎用 - 批量样式更新建议先移除再添加，或用
replaceWith()配合新元素，减少重排重绘 - 涉及尺寸、位置等依赖布局的操作，可结合
requestAnimationFrame提升性能
实用小技巧
把样式逻辑封装成可复用函数，降低出错率：
- 封装高亮函数：
function highlight(el) { el.classList.add('highlight'); setTimeout(() => el.classList.remove('highlight'), 2000); } - 响应式类切换：
if (window.innerWidth - 根据数据状态自动设类：
item.classList.toggle('comple
ted', item.done);
ted', item.done);
