css classlist
时间: 2023-09-29 19:07:34 浏览: 59
CSS classList 是一个 DOM API,用于获取和修改元素的类名。它是一个只读属性,返回一个 DOMTokenList 对象,其中包含了元素的类名列表。
可以使用 classList 属性来添加、删除和切换类名。例如,使用 `classList.add('className')` 方法可以向元素中添加一个类名,使用 `classList.remove('className')` 方法可以从元素中删除一个类名,使用 `classList.toggle('className')` 方法可以切换元素中的类名。此外,还可以使用 `classList.contains('className')` 方法来检查元素是否包含某个类名。
以下是一些常见的 classList 方法:
- `add(className)`:向元素中添加一个类名。
- `remove(className)`:从元素中删除一个类名。
- `toggle(className)`:如果元素中已经存在一个类名,则删除它;否则添加它。
- `contains(className)`:检查元素是否包含指定的类名。
示例:
```html
<div id="myElement" class="foo bar"></div>
```
```javascript
const myElement = document.querySelector('#myElement');
// 添加类名
myElement.classList.add('baz');
// 删除类名
myElement.classList.remove('foo');
// 切换类名
myElement.classList.toggle('bar');
// 检查是否包含类名
if (myElement.classList.contains('baz')) {
console.log('包含 baz 类名');
}
```