改样式有三种手法：style 是"直接动手改这件衣服"；className 是"把一整衣柜衣服全换光"，一不小心把别的衣服也换没了；classList 是现代推荐——想加哪件加哪件、想摘哪件摘哪件，互不影响。
CSS 里用短横线分开的词，到了 JS 里要把短横线去掉、后一个词首字母大写（这叫驼峰）。比如背景色：
| CSS 里写 | JS 里写 style.什么 |
|---|---|
| background-color | style.backgroundColor |
| font-size | style.fontSize |
| border-radius | style.borderRadius |
let box = document.getElementById('styleBox'); // 抓到要改的盒子
box.style.backgroundColor = 'lightblue'; // 改背景色（驼峰！不能写 background-color）
box.style.fontSize = '20px'; // 改字号（带单位要写成 '20px' 字符串）
如果你用 style 去读外部 CSS 里写的样式，会读不到。因为 style 只管"直接写在标签 style= 里的那点"，读不到你写在 <style> 或外面 CSS 文件里的；日常想切样式，优先用下面的 classList。
因为 class 是 JS 的保留字，不能写 box.class，只能写 box.className。它是一整串字，你一写新的，原来整串都被顶掉。
// 假设盒子原本 class="box base" box.className = 'box base'; // 现在身上穿的是这两件 box.className = 'active'; // 整串替换成只穿 active // 现在只剩 active！box、base 全被换没了
如果你用 className 只想加一个类，却发现别的类都没了。因为 className 是"整串替换"不是"加一个"；想加得自己拼字符串（容易多空格少空格），所以日常别用它加单个类。
| 小开关 | 干什么 |
|---|---|
| add('类名') | 加一个类，重复加也不报错 |
| remove('类名') | 摘掉某个类，没有也不报错 |
| toggle('类名') | 有就摘、没有就加（点一下高亮最常用） |
| contains('类名') | 问一句"有这个类吗"，回答 true/false |
box.classList.add('hl'); // 只加 hl，别的不动
box.classList.remove('base'); // 只摘 base
box.classList.toggle('hl'); // 再点：有→摘，没有→加
box.classList.contains('hl'); // true / false
① 用在哪：按钮高亮、弹窗显隐、开关灯、主题切换。
② 常见坑：用 className 加类把别的类覆盖没了；style 驼峰写错读不到。
③ 怎么解决：单个类用 classList.add/remove/toggle；改样式优先切类，属性名写驼峰。