Classes

classList

JavaScript proporciona la funciones classList que nos permite manipular las clases que se encuentran en nuestro DOM. Podemos agregar clases, eliminar clases, alternar clases y buscar clases en elementos.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');

  // Add a class
  element.classList.add('section-color');

  // Remove a class
  element.classList.remove('section');

  // Toggle a class
  element.classList.toggle('section');

  // Check if an element has a class
  if(element.classList.contains('section')) {
    console.log('class in element'); //-> class in element
  }
  

className

Puede usar className para obtener todas las clases en un elemento como una cadena de caracteres, agregar una clase, reemplazar o eliminar completamente todas las clases.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');

  // Get all of the classes on an element
  let elementClasses = element.className;
  console.log(elementClasses); //-> section

  // Add a class to an element
  element.className += ' section-color';

  // Completely replace all classes on an element
  element.className = ' section-blue';