jQuery 获取和设置 CSS 类

获取和设置 CSS 类是 jQuery 中常用的操作之一。下面我将向你详细讲解jQuery 获取和设置 CSS 类的完整攻略。

获取 CSS 类

1. 通过 attr() 方法获取

我们可以通过 attr() 方法获取元素的 class 属性，然后使用 split() 方法将其转换成数组，最后通过遍历数组获取到元素的所有 class。

let classes = $('#myElement').attr('class').split(' ');
for (let i = 0; i < classes.length; i++) {
  console.log(classes[i]);
}

1. 通过 prop() 方法获取

我们也可以通过 prop() 方法获取元素的 classList 属性，直接使用 classList 对象的方法获取到元素的所有 class。

let classes = $('#myElement').prop('classList');
for (let i = 0; i < classes.length; i++) {
  console.log(classes[i]);
}

设置 CSS 类

1. 使用 addClass() 方法添加 class

我们可以使用 addClass() 方法向元素添加一个或多个 class。多个 class 之间用空格隔开。

$('#myElement').addClass('newClass');
$('#myElement').addClass('newClass1 newClass2');

1. 使用 removeClass() 方法移除 class

我们可以使用 removeClass() 方法移除元素指定的一个或多个 class。多个 class 之间用空格隔开。

$('#myElement').removeClass('oldClass');
$('#myElement').removeClass('oldClass1 oldClass2');

1. 使用 toggleClass() 方法切换 class

我们可以使用 toggleClass() 方法在类和元素之间切换。如果在元素上存在类，则删除该类；否则添加一个类。切换的 class 在括号中进行定义。多个 class 之间用逗号隔开。

$('#myElement').toggleClass('newClass');
$('#myElement').toggleClass('newClass1 newClass2');

以上就是 jQuery 获取和设置 CSS 类的完整攻略，希望对你有所帮助。