javaScript修改css最快方式是操作element.style，但仅影响行内样式，无法覆盖!important规则或读取计算值；应按场景选用style、className/classlist、getComputedStyle或insertRule。
直接改 element.style 只影响行内样式
javascript 修改 CSS 最快的方式是操作 style 属性，但它只写入行内样式（即 html 的 style 属性），无法覆盖外部 CSS 文件或
块中用 !important 声明的规则，也不能读取计算后的值（比如百分比转成像素后的结果）。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 设单个样式：用
element.style.color = 'red'，注意 CSS 属性名要转成驼峰式（font-size→fontSize，z-index→zIndex） - 批量设样式：推荐用
Object.assign(element.style, { fontSize: '14px', opacity: 0.8 })，比连写多行.style.xxx更紧凑 - 清空某样式：赋值为空字符串，如
element.style.display = ''，不是NULL或undefined
想切换预设样式？用 className 或 classList
如果外观变化是一组固定搭配（比如“激活态”“禁用态”“加载中”），硬编码 style 值容易出错且难维护。此时应把样式写在 CSS 类里，js 只负责开关类名。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 简单切换：用
element.className = 'btn btn--primary active'—— 但会覆盖全部原有类名，慎用 - 推荐方式：用
element.classList.add('active')、.remove('disabled')、.toggle('hidden')，支持链式调用，比如el.classList.add('a').remove('b').toggle('c') - 检查是否存在：用
element.classList.contains('loading')，比正则匹配className字符串可靠得多
需要读取最终渲染样式？必须用 getComputedStyle()
element.style 只返回行内设置的值，而 getComputedStyle(element) 返回浏览器计算后的实际样式（含继承、媒体查询生效后、单位已转换的值）。这是唯一能拿到 width 实际像素、color RGB 值、display 是否被父元素影响等信息的方法。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 获取值：用
getComputedStyle(el).fontSize，返回类似"16px"；注意它只读，不能赋值 - 性能注意：频繁调用会触发重排（reflow），尤其在循环里。如需多个属性，先存结果：
const cs = getComputedStyle(el); const w = cs.width; const h = cs.height; - 伪元素支持：第二个参数可传伪元素字符串，如
getComputedStyle(el, '::before')，但不支持所有浏览器对::selection的读取
动态加 CSS 规则？小心 insertRule 的索引陷阱
如果要全局注入新样式（比如主题色切换、夜间模式），可以操作
标签的 CSSStyleSheet 对象，用 insertRule(rule, index)。但这个 index 是插入位置，不是追加 —— 错填会导致规则错序甚至报错。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 安全追加：用
sheet.insertRule(rule, sheet.cssRules.Length)，确保插到最后 - 避免重复：插入前先遍历
sheet.cssRules检查是否已存在相同规则（注意浏览器可能自动标准化写法，比如把flex展开为flex: 0 1 auto） - 兼容性：IE 用
addRule(selector, style, index)，参数顺序和返回值都不同，现代项目可忽略，但若需支持旧环境得兜底
直接操作样式看似简单，但行内 style、class 切换、计算样式、动态 sheet 四种路径对应完全不同场景。最容易被忽略的是：修改 style 后立即读 offsetHeight 可能拿不到更新值，因为浏览器尚未重排 —— 这时得用 getComputedStyle 或强制触发（如 el.offsetHeight 读一次）来同步状态。