检查元素是否有 CSS 类.如果没有，请添加它

Question

如何将下面的jQuery行转换为Javascript。我想检查这个元素是否有类。如果它没有CSS类，我想将其添加到元素中。这些行在下面以星号表示。

Jquery

    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;

  function goToSlide(n){
  //Remove showing from the current slide
    var thisSlide = slides[currentSlide];
    thisSlide.classList.remove("showing");
  //get position of next slide.
    currentSlide = (n+slides.length)%slides.length;
  //Add current to next slide
    var nextSlide = slides[currentSlide];
 //Check if nextSlide has showing class. If not, add it.
  **
   if (!($(nextSlide).hasClass('showing'))) {
           $(nextSlide).addClass('showing'); 
    }
  **
    }

Answer 1

您可以使用

classList，它是contains和add方法。

if(!nextSlide.classList.contains(classname)){
      nextSlide.classList.add(classname);
}

function addclass(){
  if(!document.getElementById('div1').classList.contains("new")){
      document.getElementById("div1").classList.add("new");
  }
  else{
      console.log("Already exist");
  }
}

.bg-r{
  width:50px;
  height:50px;
  border:1px solid #000;
}
.new{
  background-color:#f00;
}

<div id="div1" class="bg-r"></div>
<button onclick="addclass();">Add</button>

Answer 2

检查此函数

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

演示