JavaScript 操作 CSS 的核心方式是通过修改元素的 style 属性（内联样式）或切换 class 名来间接控制样式，前者适合简单、临时的样式变更，后者更推荐用于可复用、易维护的动态样式控制。
直接修改元素的 style 属性
每个 DOM 元素都有一个 style 属性，它是一个 CSSStyleDeclaration 对象，对应 HTML 中的 style 内联样式。注意：只能读写**内联样式**（即通过 element.style.xxx 设置的），不能直接读取 CSS 文件或 中定义的样式（要用 getComputedStyle()）。
- 属性名用驼峰写法：
backgroundColor而不是background-color - 单位通常需手动添加：
element.style.width = "200px"，不写单位会无效 - 设置多个样式建议批量操作，避免反复重排（reflow）
示例：
const box = document.getElementById("myBox");
box.style.color = "#333";
box.style.backgroundColor = "lightblue";
box.style.borderRadius = "8px";
通过 class 切换控制样式（推荐）
把样式写在 CSS 类中，JS 只负责添加、删除或切换 class，逻辑清晰、性能好、便于复用和主题管理。
立即学习“Java免费学习笔记（深入）”；
-
element.classList.add("active")— 添加类 -
element.classList.remove("hidden")— 删除类 -
element.classList.toggle("highlight")— 切换类（有则删，无则加） -
element.classList.contains("disabled")— 判断是否含某类
CSS 示例：
.highlight { background: yellow; font-weight: bold; }
.disabled { opacity: 0.5; pointer-events: none; }
JS 调用：
box.classList.toggle("highlight"); // 点击高亮/取消高亮
box.classList.add("disabled"); // 禁用状态
读取计算后的样式（getComputedStyle）
当需要获取最终生效的样式（包括来自 CSS 文件、继承、浏览器默认值等），用 window.getComputedStyle(element)。
- 返回只读对象，不可直接修改
- 支持传入伪元素，如
getComputedStyle(el, "::before") - 注意：返回值是字符串（如
"rgb(255, 0, 0)"或"20px"），需解析才能用于计算
示例：
const computed = getComputedStyle(box); console.log(computed.width); // "200px" console.log(computed.backgroundColor); // "rgb(230, 240, 255)"
动态插入或修改 CSS 规则（进阶）
适用于运行时生成主题色、响应式断点或组件化样式注入场景。
- 创建
标签并追加到 - 通过
document.styleSheets访问已加载样式表，用insertRule()/deleteRule()修改规则（注意跨域限制）
简易注入示例：
const style = document.createElement("style");
style.textContent = `.theme-dark { background: #1a1a1a; color: #eee; }`;
document.head.appendChild(style);
基本上就这些。日常开发优先用 class 切换；临时强调或动画起始态可用 style；读取真实渲染值靠 getComputedStyle；复杂主题系统再考虑动态 CSS 注入。不复杂但容易忽略细节，比如单位、驼峰、重排影响——留心就稳了。
