如何使用 jQuery 添加和删除 CSS 类到元素？-猿码集

使用 jQuery 添加和删除 CSS 类可以非常方便地改变选定元素的样式，本文将详细介绍如何使用 jQuery 添加和删除 CSS 类到元素。

添加 CSS 类

要向一个元素添加 CSS 类，可以使用 jQuery 的 .addClass() 方法。这个方法接受一个或多个参数，每个参数都是要添加到元素的类名。


$(selector).addClass(classname);

其中，$(selector) 是要添加类的元素的选择器，classname 是要添加的类名。

下面的代码会向一个拥有“demo”类的元素添加一个名为“test”的类：


$(document).ready(function(){
  $("demo").addClass("test");
});

这个例子应该在一个 HTML 页面的 <head> 标签内包含 jQuery 库。$ 符号是一个 jQuery 函数的别名，它允许您选择一个或多个 HTML 元素并对其执行操作。

通过向 .addClass() 方法传递多个参数，可以一次添加多个类。

下面的代码向一个“demo”元素添加三个类（“test1”、“test2”、“test3”）：


$(document).ready(function(){
  $("demo").addClass("test1 test2 test3");
});

可以使用 .addClass() 方法上的函数来指定添加类的条件。在该函数中，可以调用条件代码并根据结果添加类。

下面的代码将添加一个名为“important”的类，条件是如果值为“yes”的输入元素被选中，则添加该类。


$(document).ready(function(){
  $("input[value='yes']").addClass(function(){
    return "important";
  });
});

要从元素中删除 CSS 类，可以使用 jQuery 的 .removeClass() 方法。这个方法接受一个或多个参数，每个参数都是要从元素中删除的类名。


$(selector).removeClass(classname);

其中，$(selector) 是要从中删除类的元素的选择器，classname 是要删除的类名。

下面的代码会从拥有“demo”和“test”类的元素中删除“test”类：


$(document).ready(function(){
  $("demo").removeClass("test");
});

如果想要删除元素的所有 CSS 类，可以使用 .removeClass() 方法而不传递任何参数。

下面的代码删除一个“demo”元素的所有类：


$(document).ready(function(){
  $("demo").removeClass();
});

可以使用 .removeClass() 方法上的函数来指定删除类的条件。在该函数中，可以调用条件代码并根据结果删除类。

下面的代码将删除一个名为“important”的类，条件是如果值为“no”的输入元素被选中，则删除该类。


$(document).ready(function(){
  $("input[value='no']").removeClass(function(){
    return "important";
  });
});

通过使用 jQuery 添加和删除 CSS 类，可以轻松改变选定元素的样式。使用 .addClass() 方法向元素添加一个或多个类，使用 .removeClass() 方法从元素中删除一个或多个类。同时，可以使用这些方法的函数形式来指定添加或删除类的条件。

学习如何使用 jQuery 添加和删除 CSS 类可以帮助您更好地掌握网页设计和 JavaScript 编程的技巧。如果您想深入了解 jQuery，可以参考 jQuery 的官方文档。