JavaScript如何修改CSS样式

JavaScript修改CSS样式并非简单“赋值即生效”，而是一场关于优先级、作用域与时机的精密博弈：直接操作`element.style`仅影响行内样式且易被CSS规则压制；`classList`通过预设类名实现可维护、响应式的样式切换；动态注入规则需借助`insertRule`操作样式表；而`getComputedStyle`虽能读取最终渲染值，却受限于单位字符串、伪元素支持及潜在的性能开销——真正关键在于理解每种方式的适用边界：改哪里（行内/类/全局规则）、谁赢（优先级与!important）、何时生效（重排时机与渲染状态）。

直接改 element.style 只影响行内样式

JavaScript 修改元素样式最常用的方式是操作 style 属性，但它只读写 HTML 中的 style 行内属性，不会覆盖 CSS 文件或