JavaScript的hasClass方法

JavaScript的hasClass方法是判断指定元素是否具有指定类名的常用操作之一。在本篇文章中，我们将会：

• 学习hasClass方法是什么；
• 如何使用hasClass方法；
• 举例实现hasClass方法；
• 与其他JavaScript框架的hasClass方法进行比较。

基本介绍

hasClass方法是在JavaScript中判断指定元素是否具有指定类名的方法。该方法通常应用在DOM元素的样式化操作中，例如当我们需要通过JavaScript来进行元素的显示与隐藏时，可以使用hasClass方法来检查该元素是否具有隐藏样式，从而调整该元素的显示效果。

常见的示例代码如下所示：

//返回指定元素是否包含指定类名的布尔值
function hasClass(el, className) {
  if (el.classList) {
    return el.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  }
}

该示例代码中包含一个名为hasClass的函数，它是检测指定元素是否具有指定类名的完整方法。

如何使用

为了使用hasClass方法，您需要在JavaScript代码中调用它。您需要传递两个参数到该方法中：

1. 要检查的元素。通常是通过DOM元素的id或类名来获取该元素；
2. 您希望检查的类名。

例如，如果我们有一个id为“myElement”的元素，我们想要检查它是否包含名为“hidden”的类，则可以按照以下方式执行：

if (hasClass(document.getElementById("myElement"), "hidden")) {
  //元素包含该类名
} else {
  //元素不包含该类名
}

示例代码

下面是一个基于jQuery的hasClass方法的示例：

$(document).ready(function(){
  $("button").click(function(){
    if($("#myElement").hasClass("hidden")){
      $("#myElement").removeClass("hidden");
    } else {
      $("#myElement").addClass("hidden");
    }
  });
});

该示例中，点击按钮后将检查id为“myElement”的元素是否具有名为“hidden”的类，如果有，则将其删除，否则将其添加。

与其他框架的比较

除了原生JavaScript，许多其他的JavaScript框架（例如：jQuery、React等）中也包含有hasClass方法。尽管实现的方法可能有所不同，但其中大多数都将该方法用于检查指定元素是否具有指定类名。

下面是jQuery的hasClass方法示例：

$(selector).hasClass(className)

该方法的参数是要检查的类名，而它返回的结果是布尔类型的值，如果元素具有指定的类名，则为true，否则为false。

结论

在JavaScript中，hasClass方法是判断指定元素是否具有指定类名的必备方法之一。无论您是使用原生JavaScript还是其他JavaScript框架，都应该学会使用它以操作DOM元素的样式。