直接修改element.style只影响行内样式，无法覆盖CSS文件或style块中的规则（除非无!important且优先级更低）；需用驼峰命名、带单位赋值；读取时仅返回行内值，查最终样式须用getComputedStyle。
直接改 element.style 只影响行内样式
JavaScript 修改元素样式最常用的方式是操作 style 属性，但它只读写 HTML 中的 style 行内属性，不会覆盖 CSS 文件或
块里定义的规则，除非那些规则没加 !important 且优先级更低。
常见误操作：以为 el.style.color = 'red' 能让所有文本变红——其实它只对这个 el 生效，且一旦 CSS 里写了 color: blue !important，JS 就会被压制。
-
style属性名用驼峰写法：backgroundColor而不是background-color - 设置值必须带单位（
px、em、%等），el.style.width = 200无效，得写el.style.width = '200px' - 读取时，
el.style.xxx只返回行内设置的值，查不到 CSS 文件里写的；要查最终计算值，得用getComputedStyle(el).xxx
classList 是切换样式类的推荐方式
比起硬编码样式，用 CSS 类 + classList 更可控、更易维护，也天然支持 :hover、@media 等 CSS 能力。
const btn = document.querySelector('#submit');
btn.classList.add('disabled');
btn.classList.remove('active');
btn.classList.toggle('highlight');
btn.classList.contains('disabled'); // true
-
add()和remove()可一次传多个类名：el.classList.add('a', 'b', 'c') -
toggle('cls', boolean)的第二个参数决定是强制添加还是移除，不传则切换 - 避免直接赋值
el.className = 'new'，会清空所有已有类
动态插入 CSS 规则要用 insertRule
如果需要在运行时生成整条 CSS 规则（比如主题色注入、组件 scoped 样式），不能靠改 style 或 classList，得操作
元素的 sheet。
立即学习“Java免费学习笔记（深入）”；
const style = document.createElement('style');
document.head.appendChild(style);
const sheet = style.sheet;
sheet.insertRule('.theme-dark { color: #fff; background: #111; }', 0);
-
insertRule(rule, index)第二个参数是插入位置，0表示最前，会影响层叠顺序 - 注意浏览器兼容性：IE10+ 支持，但 IE 需用
addRule()（已废弃，不建议用） - 大量规则建议拼成字符串一次性注入
style.textContent，比反复insertRule快
getComputedStyle 读的是最终生效值，但有陷阱
它返回的是浏览器计算后的样式，看似“真实”，但要注意：
- 返回值全是字符串，包括
width、margin这些本应是数字的属性，都带单位：getComputedStyle(el).width === '200px' - 无法获取伪元素样式（如
::before），除非显式传第二个参数：getComputedStyle(el, '::before') - 某些属性（如
display）在元素display: none时可能返回'none'，但其他布局相关属性（如height）可能返回'0px'或空字符串，行为不一致 - 性能敏感场景慎用：频繁调用会触发重排（reflow），尤其在循环中
CSS 和 JS 交互的关键不在“能不能改”，而在于“改哪里、谁赢、何时生效”。style 直接、即时但脆弱；classList 间接、可复用但需预设类；insertRule 灵活但难调试；getComputedStyle 看似权威，实则受渲染时机和元素状态影响很大。