直接修改 element.style 仅影响行内样式，优先级高但范围窄；应使用 classlist 管理类名、getcomputedstyle() 获取最终样式、动态样式推荐插入 标签或 css 变量。
直接改 element.style 只影响行内样式，且优先级高但覆盖范围窄
这是最常用也最容易误解的方式。给元素设置 style 属性，本质是操作 DOM 元素的 style 对象，它只读写 HTML 中的 style 行内属性（如 <div style="color: red">），不会触碰 CSS 类、外部样式表或 <code><style></style> 块里的规则。
常见错误：以为 el.style.color = 'blue' 能覆盖掉某个 CSS 类里定义的 color —— 实际上可以，因为行内样式优先级高于类选择器；但反过来，如果那个类用了 !important，那这行 JS 就失效了。
注意点：
-
style属性名用驼峰（backgroundColor），不是短横线（background-color） - 单位必须显式写出（
el.style.width = '200px'），数值型赋值会自动转成像素（el.style.width = 200→"200px"），但仅限于width/height等少数属性，不通用 - 批量设置建议用
Object.assign(el.style, { opacity: 0.5, transform: 'scale(0.9)' })，比逐行写更安全
切换类名用 classList，别再用 className 拼字符串
element.className 是个字符串，手动增删类容易出错（比如多空格、重复添加、误删其他类）。现代浏览器都支持 element.classList，它是个类数组对象，提供语义化方法：
el.classList.add('active', 'fade-in');
el.classList.remove('disabled');
el.classList.toggle('hidden');
el.classList.contains('error'); // true / false
el.classList.replace('old', 'new');
特别适合状态控制：按钮加载中、菜单展开、表单校验失败等场景。和 CSS 配合时，所有样式逻辑留在 CSS 文件里，JS 只管“是什么状态”，不操心“长什么样”。
兼容性提醒：classList 在 IE10+ 支持，IE9 及以下需用 polyfill 或退回到 className 字符串操作（不推荐）。
读取最终计算样式要用 getComputedStyle()，不是 element.style
element.style 只返回行内样式，而你真正想知道的往往是“这个元素现在实际显示成什么样”——包括继承的、层叠后生效的、甚至浏览器默认样式。这时得用：
const computed = getComputedStyle(el);
console.log(computed.color); // "rgb(255, 0, 0)"
console.log(computed.fontSize); // "16px"
console.log(computed.getPropertyValue('border-top-width')); // "1px"
关键细节：
- 返回的是只读的
CSSStyleDeclaration，不能直接赋值 - 所有值都是绝对单位（
px、rgb()），没有相对单位（em、%、rem）原始值 -
伪元素也能查，比如
getComputedStyle(el, '::before') - 频繁调用可能触发重排（reflow），如需多次读取，先缓存结果
动态加 CSS 规则？用 document.styleSheets 或插入 <style></style>
运行时生成样式规则（比如主题色切换、暗黑模式、图表配色），有两种主流方式：
方式一：插入新 <style></style> 标签（简单直接，推荐）
const style = document.createElement('style');
style.textContent = `
.theme-dark .card { background: #222; color: #eee; }
.theme-dark button:hover { border-color: #444; }
`;
document.head.appendChild(style);
方式二：往已有样式表追加规则（更精细，但有跨域限制）
const sheet = document.styleSheets[0];
sheet.insertRule('.highlight { animation: pulse 2s infinite; }', sheet.cssRules.length);
注意点：
- 用
insertRule时，IE 需用addRule（已废弃），现代项目可忽略 - 动态样式若依赖 JS 计算（如颜色渐变），建议生成后存在
<style id="dynamic-theme"></style>里，后续替换内容比反复删增标签更高效 - 服务端渲染（SSR）场景下，动态插入的
<style></style>可能导致水合（hydration）不一致，需同步服务端输出
最常被忽略的一点：CSS 变量（custom properties）其实是 JS 和 CSS 之间最轻量的桥梁——直接改 document.documentElement.style.setProperty('--primary-color', '#3b82f6')，所有用到该变量的地方实时响应，无需操作 DOM 或样式表。
