最推荐的方式是通过 classList API 动态操作 CSS 类：add 添加、remove 移除、toggle 切换、contains 检查，符合关注点分离，便于复用与维护。
JavaScript 操作 CSS 最常用、最推荐的方式就是通过动态添加和移除 CSS 类（class），而不是直接修改 style 属性。这样更符合关注点分离原则，也便于复用样式和维护。
使用 classList API（现代标准方式）
classList 是元素对象上的一个只读属性，返回一个 DOMTokenList，提供简洁、安全的方法来操作类名。
-
添加类：
element.classList.add("active", "highlight")—— 可一次加多个类，已存在不重复 -
移除类：
element.classList.remove("active")—— 不存在的类不会报错 -
切换类（有则删，无则加）：
element.classList.toggle("hidden") -
检查是否含有某类：
element.classList.contains("disabled")→ 返回布尔值 -
替换类：
element.classList.replace("old", "new")（支持较新浏览器） -
清空所有类：
element.className = ""或element.setAttribute("class", "")（classList本身不提供 clear 方法）
兼容旧浏览器：回退到 className 操作
IE10 以下不支持 classList，可手动处理 className 字符串（但容易出错，仅作了解）：
- 添加类：
el.className += " new-class"（注意空格，可能重复） - 移除类：需用正则或 split/join 处理，例如：
el.className = el.className.replace(/\bold-class\b/g, "").trim()
实际项目中建议用 classList + 简单 polyfill，或直接放弃 IE9 及更早版本。
立即学习“Java免费学习笔记（深入）”；
常见实用场景示例
比如做一个按钮点击切换激活态：
const btn = document.querySelector("#toggle-btn");
btn.addEventListener("click", () => {
btn.classList.toggle("active");
btn.classList.toggle("pressed");
});
再比如表单验证后高亮错误项：
const input = document.querySelector("input");
if (!input.value) {
input.classList.add("error", "shake");
} else {
input.classList.remove("error", "shake");
}
注意细节，避免踩坑
- 类名是字符串，不要带点（
.active❌），写"active"✅ -
classList方法不返回元素本身，不能链式调用（如el.classList.add().remove()会报错） - 动态添加的类，必须在 CSS 中已定义才生效，JS 不会“创建”样式
- 避免混用
style和class控制同一属性（如同时设color和.text-red），内联样式优先级更高
基本上就这些。掌握 classList 的 add/remove/toggle/contains 四个方法，就能覆盖绝大多数动态样式控制需求。
