jQuery |获取和设置 CSS 类

在前端开发中，我们常常需要通过 JavaScript 操作 DOM 元素的 CSS 类。jQuery 提供了一系列方便的方法来获取和设置元素的 CSS 类，本文将对其进行介绍。

获取 CSS 类

.hasClass()

hasClass(className) 方法可以检查元素是否具有指定的 CSS 类，如果有，则返回 true，否则返回 false。

例如，下面的代码检查元素是否拥有名为 active 的 CSS 类：

if ($('#myElement').hasClass('active')) {
  // do something
}

.attr()

另一种获取元素 CSS 类的方法是使用 attr(attributeName) 方法。通过将 attributeName 参数设置为 class，可以获取元素所有的 CSS 类。

例如，下面的代码将打印元素 myElement 所有的 CSS 类：

console.log($('#myElement').attr('class'));

设置 CSS 类

.addClass()

addClass(className) 方法可以向元素添加指定的 CSS 类。如果元素已经拥有该类，则不会重复添加。

例如，下面的代码将向元素 myElement 添加名为 active 的 CSS 类：

$('#myElement').addClass('active');

.removeClass()

removeClass(className) 方法可以从元素中删除指定的 CSS 类。如果元素没有该类，则操作不会产生任何效果。

例如，下面的代码将从元素 myElement 中删除名为 active 的 CSS 类：

$('#myElement').removeClass('active');

.toggleClass()

toggleClass(className) 方法可以在元素中添加或删除指定的 CSS 类。如果元素拥有该类，则删除它；否则添加它。

例如，下面的代码将在元素 myElement 上切换名为 active 的 CSS 类：

$('#myElement').toggleClass('active');

总结

本文介绍了 jQuery 中用于获取和设置 DOM 元素 CSS 类的方法。这些方法使得开发人员可以更方便地操作页面元素，并实现更加灵活的用户界面。