直接修改element.style仅影响行内样式，优先级高但不持久；应优先用classList增删类名复用CSS规则；读取真实样式须用getComputedStyle()；全局动态样式宜插入<style>标签。
直接改 element.style 只影响行内样式
这是最常用也最容易误解的方式。style 属性只读写元素的 行内样式（即 HTML 中 style="..." 的内容），不会覆盖 CSS 类里的规则，也不会触发 CSS 优先级计算。
常见错误：以为 el.style.color = 'red' 能覆盖类中定义的 color: blue —— 实际上它确实能生效，但仅因为行内样式的优先级更高；一旦你后续用 JS 清掉 style，颜色就立刻回退到类样式，而不是“恢复原样”。
实操建议：
- 适合做临时高亮、拖拽位移、动画过渡值等单次、明确、不依赖类逻辑的修改
- 批量设样式别连写
el.style.left = '10px'; el.style.top = '20px';，改用Object.assign(el.style, { left: '10px', top: '20px' }) - 注意 CSS 属性名要转驼峰：比如
background-color→backgroundColor，font-size→fontSize
切换 className 或 classList 才真正复用 CSS 规则
想让 JS 修改和 CSS 类协同工作，核心是操作 className 或更推荐的 classList。它不碰行内样式，纯粹增删类名，让浏览器按原有 CSS 优先级重新匹配渲染。
立即学习“Java免费学习笔记（深入）”；
典型场景：按钮点击变 loading 状态、菜单展开收起、主题切换、表单验证反馈。
实操建议：
- 优先用
el.classList.add('loading')/.remove('loading')/.toggle('active')，比直接拼className字符串安全得多 - 避免
el.className = 'btn btn-primary active'这种全量赋值——会意外清掉其他 JS 或框架加的类 - 需要条件切换时，用
el.classList.toggle('disabled', isSubmitting)，第二个参数控制是否添加
用 getComputedStyle() 读取最终生效样式，别信 style
element.style 只返回行内值，而你想知道元素“现在实际显示成什么样”，比如某个 div 的真实宽度、继承来的字体大小、甚至 media query 生效后的颜色——必须用 getComputedStyle()。
常见陷阱：在元素刚插入 DOM 但尚未渲染（如 appendChild 后立刻调 offsetWidth）时，可能拿到 0 或旧值；getComputedStyle() 是只读快照，不实时响应后续样式变化。
实操建议：
- 读取计算后值：
const computed = getComputedStyle(el);<br>console.log(computed.width); // '200px'<br>console.log(computed.fontSize); // '16px'
- 注意它返回的是字符串，数值需
parseFloat()提取，单位要自己判断（如em、rem、%） - 不要在循环里高频调用——有性能开销，必要时缓存结果
动态插入 CSS 规则？用 document.styleSheets 或 <style> 标签
当需要 JS 控制全局样式（比如夜间模式切换整站背景色、根据屏幕尺寸注入媒体查询），不能靠改单个元素，得动样式表本身。
两种主流方式：一是往 <head> 插入新 <style> 标签（简单直接）；二是用 document.styleSheets[0].insertRule()（更底层，兼容性略差）。
实操建议：
- 插入
<style>最稳妥：const style = document.createElement('style');<br>style.textContent = '.theme-dark { background: #121212; color: #fff; }';<br>document.head.append(style); - 用
insertRule()时注意：IE 需用addRule()，且必须指定index（通常用sheet.cssRules.length） - 动态样式尽量加唯一类名或属性选择器（如
[data-theme="dark"]），避免污染全局
