在前端开发中，通过单击事件同时切换多个CSS样式类是一个常见需求。利用原生JavaScript的classList属性，我们可以在不破坏其他样式的前提下，对同一个元素批量添加、移除或反转多个类。
为什么不直接修改className
很多初学者会用 element.className = "a b c" 来切换样式，但这样会覆盖元素原有的所有类，导致其他逻辑控制的样式丢失。使用 classList 可以精准操作单个或多个类。
使用classList.toggle切换多个类
classList.toggle 接受一个类名作为参数，可以多次调用以实现多类切换。下面示例在单击按钮时，同时为卡片切换 active 和 shadow 两个类：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card { width: 200px; height: 100px; background: #eee; transition: all .3s; }
.active { background: #3498db; color: #fff; }
.shadow { box-shadow: 0 4px 12px rgba(0,0,0,.3); transform: scale(1.05); }
</style>
</head>
<body>
<div id="box" class="card">点击按钮切换我</div>
<button id="btn">切换样式</button>
<script>
// 获取按钮和卡片元素
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 绑定单击事件
btn.addEventListener('click', function() {
// 同时切换两个类
box.classList.toggle('active');
box.classList.toggle('shadow');
});
</script>
</body>
</html>
封装为切换多个类的函数
如果需要切换的类较多，可以封装一个辅助函数，遍历类数组进行切换：
// 批量切换多个类的函数
function toggleClasses(el, classList) {
classList.forEach(function(cls) {
el.classList.toggle(cls);
});
}
// 用法示例
var box = document.getElementById('box');
document.getElementById('btn').addEventListener('click', function() {
toggleClasses(box, ['active', 'shadow', 'rounded']);
});
使用add和remove精确控制
如果希望单击时某些类一定添加、某些类一定移除，可以混合使用 add 与 remove：
btn.addEventListener('click', function() {
box.classList.add('active');
box.classList.remove('old-style');
box.classList.toggle('shadow');
});
注意事项
- classList 在 IE9 及以下不支持，现代浏览器均可放心使用。
- 切换类名时应确保CSS中已定义对应类，否则无视觉效果。
- 若使用框架如Vue或React，通常需用数据绑定控制类，但底层思路一致。
通过上述方法，单击事件同时切换多个CSS样式类变得简单且安全，避免了样式覆盖问题，也提升了代码可维护性。
click_eventclassListtoggle_multiple_classes修改时间：2026-07-28 23:18:17