JavaScript动态修改DOM样式有三类核心方法：临时计算型用element.style（驼峰命名、带单位）、状态控制优先用classList（add/remove/toggle）、全局主题级变更靠CSS变量或动态注入。
JavaScript 动态切换和修改 DOM 样式，核心在于区分“单次计算型样式”和“状态型样式”，并选用合适的方法：临时调整用 element.style，状态控制优先用 classList，批量或主题级变更则靠 CSS 类或变量驱动。
直接改 style：适合动态计算、一次性设置
通过 element.style 只影响该元素的行内样式，优先级最高，但不覆盖外部 CSS（除非后者用了 !important 且未被更高优先级行内样式压制）。
- CSS 属性名必须用驼峰写法：
backgroundColor、fontSize、zIndex，不能写background-color - 带单位的值必须显式写出：
element.style.width = '300px'，写'300'无效 - 读取时只返回行内设置的值，要查最终生效样式得用
getComputedStyle(element) - 可批量赋值：
element.style.cssText = 'color: blue; font-weight: bold;'，但会覆盖已有行内样式
用 classList 切换类名：推荐用于状态管理
把样式逻辑抽到 CSS 类中，JS 只负责增删切类，更易维护、复用，也避免拼接字符串出错。
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
-
element.classList.add('active', 'highlight')—— 添加一个或多个类 -
element.classList.remove('disabled', 'loading')—— 移除指定类 -
element.classList.toggle('hidden')—— 有则删、无则加，适合开关类 -
element.classList.contains('error')—— 判断是否存在某类，常用于条件逻辑 - 别用
element.className = 'new'，它会清空所有原有类名
动态注入或切换全局样式：比如暗色模式、主题色
当需要影响多个元素或整个页面风格时，操作单个元素的 style 或类名就不够用了。
立即学习“Java免费学习笔记（深入）”；
- 往
插入新的<style></style>标签，写入 CSS 规则 - 通过 CSS 自定义属性（变量）统一控制：
document.documentElement.style.setProperty('--primary-color', '#ff6b35')，再在 CSS 中引用color: var(--primary-color) - 切换预设的主题类名到
或上，如document.body.classList.toggle('dark-mode')，配合 CSS 的后代选择器生效 - 伪元素（
::before/::after）无法用style直接改，只能靠 CSS 变量或提前定义好类名来控制
注意事项与避坑点
实际开发中容易忽略几个关键细节：
- 频繁修改多个样式属性时，避免连续写多行
style.xxx，容易卡顿；优先用cssText或切类 - 服务端渲染（SSR）页面初始已有类名，
toggle()行为依赖当前状态，首次执行前建议先contains()判断 - 用
innerHTML插入新元素后，其上的事件监听需重新绑定或用事件委托，否则失效 - IE10+ 支持
classList，若需兼容更低版本，可用 polyfill 或退化为字符串操作（不推荐）
