检测元素是否具有类 jQurey - CSS

当我们使用jQuery或CSS来操作/样式化元素时，最常见的方式之一就是给元素添加类。但是，有时候我们需要检测一个元素是否已经具有了某个特定的类，以避免重复添加或删除类。

方法一：使用 jQuery 的 hasClass()

在jQuery中，我们可以使用 hasClass() 方法来检测一个元素是否有指定的类，其返回结果为 true 或 false。

if ($('#myElement').hasClass('myClass')) {
  // 当前元素已经有了 myClass 类
}

方法二：使用 classList 属性

在JavaScript中，每个元素都有一个 classList 属性，该属性包含了该元素的所有类名。我们可以使用 contains() 方法来检测一个元素是否有指定的类，其返回结果为 true 或 false。

if (document.getElementById('myElement').classList.contains('myClass')) {
  // 当前元素已经有了 myClass 类
}

方法三：使用 className 属性

在JavaScript中，每个元素还有一个 className 属性，该属性包含了该元素的所有类名，但是这种方式已经逐渐不推荐使用了。

if (document.getElementById('myElement').className.indexOf('myClass') > -1) {
  // 当前元素已经有了 myClass 类
}

结论

以上三种方法都能够检测元素是否具有指定的类，但是推荐使用方法一或方法二来完成检测，因为它们更加优雅和直观。同时，如果你想要在多个元素中查询是否存在某个类，可以使用 jQuery 的 filter() 方法或者 JavaScript 的 querySelectorAll() 方法来完成，这里就不再赘述了。

总之，在操作/样式化元素时，检测元素是否具有类是一个很常见的需求，希望这篇文章能够帮助你完成该任务。