如何使用 jQuery 向元素添加和删除 CSS 类？

当我们需要对页面中的元素进行样式的添加和删除时，jQuery 提供了一些方便的方法来帮助我们完成操作。以下是关于 jQuery 向元素添加和删除 CSS 类的介绍。

添加 CSS 类

我们可以使用 addClass() 方法向选择的元素添加一个或多个 CSS 类。例如：

$(selector).addClass(classname);

其中，selector 是必需的参数，表示选择器，可以是任何有效的 jQuery 选择器，例如 #id、.class 或 element 等。classname 也是必需的参数，表示要添加的一个或多个 CSS 类，多个类名以空格隔开。

下面是一个添加 CSS 类的示例：

// 向 id 为 "demo" 的元素添加 "highlight" 类
$("#demo").addClass("highlight");

当需要添加多个类名时，可以通过字符串拼接来实现：

// 向 id 为 "demo" 的元素添加 "highlight" 和 "color" 两个类
var classNames = "highlight color";
$("#demo").addClass(classNames);

删除 CSS 类

我们可以使用 removeClass() 方法从选择的元素中移除一个或多个 CSS 类。例如：

$(selector).removeClass(classname);

其中，selector 和 classname 的含义与前面介绍的相同。

下面是一个删除 CSS 类的示例：

// 从 id 为 "demo" 的元素中移除 "highlight" 类
$("#demo").removeClass("highlight");

和添加类名一样，删除多个类名时也可以通过字符串拼接来实现：

// 从 id 为 "demo" 的元素中移除 "highlight" 和 "color" 两个类
var classNames = "highlight color";
$("#demo").removeClass(classNames);

切换 CSS 类

切换 CSS 类可以同时实现添加和删除类名的效果。我们可以使用 toggleClass() 方法来切换元素上的 CSS 类。例如：

$(selector).toggleClass(classname);

其中，selector 和 classname 的含义与前面介绍的相同。

下面是一个切换 CSS 类的示例：

// 切换 id 为 "demo" 的元素上 "highlight" 和 "color" 两个类
$("#demo").toggleClass("highlight color");

如果元素上存在 classname 类，则会被移除；如果不存在，则会被添加。

以上就是关于 jQuery 向元素添加和删除 CSS 类的介绍。