DOMTokenList.toggle报错：令牌不可含空格，多类名切换方案咨询

尝试用以下代码给元素添加类名时出现报错：

menu.classList.toggle('fa fa-times');
navbar.classList.toggle('active');

报错提示：

error: DOMTokenList.toggle: The token can not contain whitespace.

需要同时使用fa和fa-times两个类名，但分开调用toggle的方式并未生效，求解决方法。

核心问题 #

classList.toggle() 一次只能操作单个类名，不能传入带空格的多个类名（空格是HTML类名的分隔符，DOMTokenList会把它当成无效令牌）。

正确的类名切换方式 #

要同时切换fa和fa-times，需要分开调用toggle：

menu.classList.toggle('fa');
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');

分开调用不生效的排查与修复 #

如果分开调用后没效果，大概率是以下原因：

• 元素未正确获取：先确认menu变量确实指向了目标DOM元素，比如在控制台打印console.log(menu)，如果输出null，说明选择器写错了或者代码执行时机太早（DOM还没加载完成）。
• 类名状态冲突：如果你的需求是切换图标（比如从fa fa-bars换成fa fa-times），直接toggle两个类可能因为初始状态导致混乱。这种情况应该先移除旧类，再添加新类：

  // 移除旧图标类，添加新图标类
  menu.classList.remove('fa-bars');
  menu.classList.add('fa', 'fa-times');
  // 或者用toggle实现切换（需确保初始状态只有其中一个类）
  menu.classList.toggle('fa-bars');
  menu.classList.toggle('fa-times');
  navbar.classList.toggle('active');
  

• 类名拼写错误：检查fa和fa-times的拼写、大小写是否和CSS/Font Awesome的类名完全一致，比如有没有写成faTime或者fa_times。

内容的提问来源于stack exchange，提问作者hoory Nikoo