最快方式是直接修改element.style，但仅影响内联样式；彻底控制需操作class或插入；推荐用classList管理预设类，动态样式可用CSS变量或insertRule。
直接改 element.style 最快，但只覆盖内联样式；想彻底控制样式优先级或复用规则，得操作 class 或插入 <style></style> 片段。
用 element.style 改单个属性（适合简单、临时变更）
这是最直觉的方式，所有 CSS 属性名转为驼峰式（如 background-color → backgroundColor），赋值即生效：
const btn = document.querySelector('button');
btn.style.backgroundColor = '#4285f4';
btn.style.padding = '8px 16px';
btn.style.borderRadius = '4px';
注意点：
-
style只读写内联样式，无法获取或修改 CSS 文件里定义的规则 - 设为
''（空字符串）会移除该内联样式，但不会恢复外部 CSS 的值 - 单位必须显式写出，
btn.style.width = 200无效，得写btn.style.width = '200px' - 批量设置建议用
Object.assign(btn.style, { ... })，但兼容性需留意（IE 不支持）
用 className 或 classList 切换预设样式（推荐用于状态管理）
把样式逻辑写在 CSS 类里，JS 只负责开关——更易维护、支持过渡动画、避免内联样式污染：
立即学习“Java免费学习笔记（深入）”；
.btn-primary { background: #4285f4; color: white; }
.btn-disabled { opacity: 0.5; cursor: not-allowed; }
操作方式：
-
element.className = 'btn-primary'：全量替换，慎用 -
element.classList.add('btn-primary')：追加类 -
element.classList.toggle('btn-disabled')：有则删、无则加 -
element.classList.replace('old', 'new')：替换（现代浏览器支持） -
element.classList.contains('btn-primary')：判断是否存在，适合条件分支
关键提醒：多个类名之间用空格分隔，但 classList 自动处理空格和去重，比手动拼 className 安全得多。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
动态插入 <style></style> 规则（适合运行时生成样式，如主题色、尺寸适配）
当需要根据数据生成大量样式（比如 100 个颜色变量），或要覆盖更高优先级的 CSS（如 !important），可注入 <style></style>：
const style = document.createElement('style');
style.textContent = `
.theme-dark { background: #1a1a1a !important; color: #eee; }
[data-size="large"] { font-size: 1.2em; }
`;
document.head.appendChild(style);
这样做要注意：
- 规则作用域是全局的，避免选择器太宽泛导致意外覆盖
- 重复插入相同
<style></style>会叠加规则，记得先查重或用id控制唯一性 - 若需频繁更新，不如用
CSSStyleSheet.insertRule()（兼容性稍差，IE10+） - 服务端渲染（SSR）场景下，首次渲染可能闪动，需同步服务端生成的样式
别忽略计算样式和 CSS 变量（--xxx）的联动能力
想读取元素最终生效的样式（含继承、层叠结果），用 getComputedStyle(element)：
const el = document.querySelector('.box');
const computed = getComputedStyle(el);
console.log(computed.width); // '200px'
console.log(computed.getPropertyValue('margin-top')); // '10px'
而 CSS 变量让 JS 和 CSS 深度协作成为可能：
:root {
--primary-color: #4285f4;
}
.button {
background-color: var(--primary-color);
}
JS 修改方式：
document.documentElement.style.setProperty('--primary-color', '#34a853')-
el.style.setProperty('--hover-scale', '1.05')（作用于该元素及其后代）
这种组合特别适合主题切换、动画参数控制等场景，但注意：CSS 变量不触发重排（re-layout），只触发重绘（repaint），性能友好。
真正麻烦的不是“怎么改”，而是“什么时候改”和“改了谁”——DOM 更新时机、事件冒泡干扰、框架响应式机制（如 React 的 state 更新异步性）都会让样式变更失效或延迟。动手前先确认目标元素是否已挂载、是否被框架代理、是否有 !important 锁死规则。
