css（cascading style sheets）是web开发中不可避免的一个重要技术，它允许开发者将网页的样式与页面结构分离，实现更加清晰和易于维护的代码。在css中，class是一种重要的选择器，允许开发者给元素赋予特定的属性和值，从而实现自定义的样式效果。
而有时候，我们需要在JavaScript的操作中动态修改某个元素的class，比如当用户点击某个按钮时，页面需要根据用户的输入或者系统的状态来改变样式。在CSS中，改变元素的class是很简单的，只需要使用element.classList接口即可。
element.classList接口是HTML5中新增的API，提供了方便的方法来操作元素的class，比如add(), remove()和toggle()等，使得开发者可以很容易地对元素进行样式的增删改查。下面我将介绍一些常用的classList接口方法及其使用。
- add()
add()方法可以将一个新的class添加到元素的classList中，如果该元素已经存在该class，那么add()方法会忽略该操作。下面是其语法：
element.classList.add(class1 [, class2 [, ... [, classN]]])
示例代码：
立即学习“前端免费学习笔记（深入）”；
一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。
const element = document.querySelector('#myDiv');
element.classList.add('myClass');- remove()
remove()方法可以将一个已经存在的class从元素的classList中移除，如果该元素不存在该class，那么remove()方法会忽略该操作。下面是其语法：
element.classList.remove(class1 [, class2 [, ... [, classN]]])
示例代码：
立即学习“前端免费学习笔记（深入）”；
const element = document.querySelector('#myDiv');
element.classList.remove('myClass');- toggle()
toggle()方法可以在元素的classList中添加或移除一个class，取决于该元素是否已经存在该class。如果元素没有该class，则toggle()方法将其添加到classList中；如果元素已经存在该class，那么toggle()方法将其从classList中移除。下面是其语法：
element.classList.toggle(class, true|false)
其中，第二个参数值为true时，表示强制添加该class；如果值为false，则表示强制移除该class。示例代码：
const element = document.querySelector('#myDiv');
element.classList.toggle('myClass');- contains()
contains()方法可以检查该元素的classList中是否包含指定的class，如果存在该class，则返回true；如果不存在，则返回false。下面是其语法：
element.classList.contains(class)
示例代码：
立即学习“前端免费学习笔记（深入）”；
const element = document.querySelector('#myDiv');
if (element.classList.contains('myClass')) {
console.log('包含该class');
} else {
console.log('不包含该class');
}总结：
在Web开发过程中，动态地改变元素的class是一项非常重要的技术，可以使得网页的交互效果更加丰富和生动。element.classList接口提供了方便的方法来操作元素的class，使得开发者可以很容易地实现样式的增删改查。本文介绍了四个常用的classList接口方法add()、remove()、toggle()和contains()及其使用方法，希望对大家有所帮助。
