推荐用 class 控制样式：CSS 预设类，JS 用 classList.add/remove/toggle 切换；其次可用 element.style（驼峰命名、不可简写）或 CSS 变量 setProperty 动态更新；避免拼接 style 字符串或 setAttribute('style')。
CSS 和 JavaScript 可以配合使用来动态改变网页样式，JavaScript 本身不写样式，但能通过操作 DOM 元素的 class、内联 style 或 CSS 自定义属性（CSS 变量）来实时更新样式。
通过修改 className 切换预设样式
这是最常用也最推荐的方式：先在 CSS 中定义好各类样式类，再用 JavaScript 控制元素是否拥有某个类名。
- 在 CSS 中写好样式，例如：.highlight { background: yellow; font-weight: bold; }
- 在 JS 中获取元素并切换类：element.classList.add('highlight')、element.classList.remove('highlight') 或 element.classList.toggle('highlight')
- 支持多个类同时操作，比如 element.classList.add('active', 'visible')
直接设置 element.style 修改内联样式
适合简单、一次性的样式调整，优先级高于外部 CSS，但可读性和维护性较差。
- 写法注意驼峰命名，如 element.style.backgroundColor = 'blue'（不是 background-color）
- 只能设置单个值，不能写简写属性（如不能直接设 style.margin = '10px 5px'，需分别设 top/right/bottom/left）
- 设为 '' 可清空该样式，但不会恢复 CSS 中定义的值，除非用 element.style.removeProperty('backgroundColor')
用 CSS 自定义属性（CSS 变量）配合 JS 控制主题或动态值
适合需要全局响应式变化的场景，比如夜间模式、尺寸调节等。
立即学习“Java免费学习笔记（深入）”；
- 在 :root 或某个父元素中定义变量：:root { --main-color: #3498db; }
- JS 中修改：document.documentElement.style.setProperty('--main-color', '#e74c3c')
- 所有用到 color: var(--main-color) 的地方会自动更新
避免直接拼接 style 字符串或 innerHTML 写样式
这类做法难以维护、易出错，且存在安全风险（如 XSS）。
- 不要用 element.innerHTML = '...
- 不要用 element.setAttribute('style', 'color:red; font-size:14px') —— 会覆盖已有内联样式
- 优先走 class 控制或 setProperty，逻辑清晰又利于复用
