---
url: /docs/guide/usage/linter/rules/unicorn/prefer-classlist-toggle.md
---

### 作用

优先使用 `element.classList.toggle(className, condition)`，而不是
通过条件逻辑进行添加/移除的模式。

### 为什么不好

与使用条件逻辑在 `add()` 和 `remove()` 之间切换相比，`toggle()` 方法更简洁，也更具表达力。

### 示例

以下是此规则的**错误**代码示例：

```javascript
if (condition) {
  element.classList.add("className");
} else {
  element.classList.remove("className");
}

condition ? element.classList.add("className") : element.classList.remove("className");

element.classList[condition ? "add" : "remove"]("className");
```

以下是此规则的**正确**代码示例：

```javascript
element.classList.toggle("className", condition);
```

## 如何使用

## 版本

此规则已在 v1.20.0 中添加。

## 参考资料