006. DOM: Clases CSS

En los capítulos anteriores habíamos visto el uso de selectores, aplicar estilos y obtener los atributos de una etiqueta HTML, sin embargo, en ningún momento hablamos de acceder a las clases.

Para acceder al nombre y valor de una clase tenemos las siguientes propiedades:

  • className: devuelve la cadena de texto que tiene el atributo class
  • classList: devuelve un DOMTokenList, que parece como si fuera un array, pero no lo es.

A través de la propiedad classList tenemos una serie de métodos que nos van a ayudar.

  • contains(«nombre-clase»): este método evalúa si un elemento tiene una clase en particular.
  • add(«nombre-clase»): añade clases a un elemento.
  • remove(«nombre-clase): elimina una clase a un elemento.
  • toggle(«nombre-clase»): es un método que actúa como interruptor, elimina una clase si la clase existe, y si la clase no existe se la añade al elemento. Este método suele utilizarse en aplicaciones con las famosas dark modes, páginas que cambian el estilo de color claro a color oscuro.
  • replace(«clase-a-reemplazar»,»clase-nueva»): reemplaza una clase en particular por otra.

Intercambiar varias clases al mismo tiempo

Lo podemos hacer de igual manera, tan sólo hay que separarlas por comas. Veamos la sintaxis que se necesita.

Ejm para agregar clases

$card.classList.add("opacity-80", "sepia")

Ejm completo

Veamos la sintaxis de un ejm completo

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manejo de DOM</title>
  <style>
  .card {
  display: inline-block;
  background-color: var(--dark-color);
  color: var(yellow-color);
  }

  .card figcaption {
  padding: 1rem;
  }

  .rotate-45 {
  transform: rotate(180deg);
  }

  .opacity-80 {
  opacity: 0.8;
  }

  .sepia {
  filter: sepia();
  }
  </style>
  </head>
  <body>

  <h2>DOM y estilos</h2>
  <p id="que-es">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae facilis, 
  adipisci necessitatibus veritatis maiores, magni amet nisi dolor excepturi 
  obcaecati laudantium animi eos accusamus. Eaque at voluptate quidem ipsa mollitia!
  </p>

  <section class="cards">
  <figure class="card">
  <img src="https://placeimg.com/200/200/tech" alt="Tech">
  <figcaption>Tech</figcaption>
  </figure>
  <figure class="card">
  <img src="https://placeimg.com/200/200/animals" alt="Animals">
  <figcaption>Animals</figcaption>
  </figure>
  <figure class="card">
  <img src="https://placeimg.com/200/200/people" alt="People">
  <figcaption>People</figcaption>
  </figure>
  <figure class="card">
  <img src="https://placeimg.com/200/200/arch" alt="Arch">
  <figcaption>Arch</figcaption>
  </figure>
  <figure class="card">
  <img src="https://placeimg.com/200/200/nature" alt="Nature">
  <figcaption>Nature</figcaption>
  </figure>
  </section>

  <script>
  const $card = document.querySelector(".card");
  console.log($card.classList);
  console.log($card.classList.contains("rotate-45"));
  $card.classList.add("rotate-45");
  console.log($card.classList.contains("rotate-45"));
  $card.classList.remove("rotate-45");
  console.log($card.classList.contains("rotate-45"));
  $card.classList.toggle("rotate-45");
  console.log($card.classList.contains("rotate-45"));
  $card.classList.toggle("rotate-45");
  console.log($card.classList.contains("rotate-45"));
  $card.classList.replace("rotate-45","opacity-80");
  console.log($card.classList.contains("opacity-80"));
  $card.classList.add("opacity-80", "sepia");
  </script>
  </body>
</html>

Resumen

En resumen, los métodos que tenemos para trabajar con las classList son:

  • add(): añadir clases
  • remove(): eliminar clases
  • toggle(): añadir o eliminar clases (dependiendo de si existe o no la clase)
  • replace(): reemplazar clase por otra
  • contains(): ver si hay o no una clase
Scroll al inicio