JavaScript操作DOM样式主要有三种方式：element.style仅读写内联样式（驼峰命名、带单位），getComputedStyle()获取最终计算样式（只读，含继承与默认值），classList推荐用于开关预设CSS类以保持样式分离。
JavaScript 中获取和修改 DOM 元素的样式，主要通过 element.style（内联样式）、getComputedStyle()（计算后样式）以及 className / classList（类名控制）三种方式实现，不同场景需选择合适的方法。
用 element.style 读写内联样式
该属性只反映元素 HTML 中直接写的 style 属性值（即内联样式），不包含 CSS 文件或 <style> 标签定义的规则，也不含继承或浏览器默认样式。
- 设置样式：使用驼峰命名（如
backgroundColor），不能用短横线（background-color会报语法错误） - 读取样式：只能读到内联设置的值；若未设置，返回空字符串（不是
undefined或默认值） - 示例：
el.style.color = 'red';、console.log(el.style.width);
用 getComputedStyle() 获取最终计算样式
这是获取元素“实际生效样式”的标准方法，返回一个只读的 CSSStyleDeclaration 对象，包含所有已应用的样式（包括继承、层叠、媒体查询匹配结果等）。
- 必须传入元素对象，第二个参数可选（伪元素如
::before） - 读取时同样用驼峰名：
getComputedStyle(el).fontSize - 注意：返回值是字符串（如
"16px"），数值型属性需手动解析（如用parseFloat()） - 无法用它设置样式 —— 它只读
通过 className 或 classList 操作 CSS 类
这是推荐的样式管理方式，把样式逻辑交给 CSS，JS 只负责开关状态，更易维护、支持 CSS 过渡动画、避免内联样式污染。
立即学习“Java免费学习笔记（深入）”；
-
el.className = "new-class"：完全替换 class 字符串（慎用，容易覆盖原有类） -
el.classList.add("active")、.remove("hidden")、.toggle("show")、.contains("disabled")：安全增删查 -
el.classList.replace("old", "new")和el.classList.item(0)也常用
动态修改样式表（较少用，但必要时很强大）
当需要批量更新、运行时生成主题、或为组件封装独立样式时，可操作 <style> 标签或 CSSStyleSheet 对象。
- 给
<head>插入新<style>标签并写入 CSS 文本 - 访问
document.styleSheets[0].cssRules（注意跨域限制和插入权限） - 用
insertRule()动态添加规则，例如：sheet.insertRule(".theme-dark { color: white; }", sheet.cssRules.length)
