CodeAventura
JavaScript en el DOM
▸Contenido y eventos▸Clases y estilos desde JS

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ClassList y estilos</title>
  </head>
  <body>
    <div id="caja" class="panel">Estado inicial</div>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
08 / 16Clases y estilos desde JS
Anterior

Clases y estilos desde JS

Feedback visual sin recargar la página

Una interfaz no solo comunica con texto. El color, el borde, la visibilidad o el tamaño de un elemento también transmiten estado.

Con JavaScript puedes cambiar clases CSS o estilos directamente para reflejar lo que está ocurriendo, sin tocar el HTML manualmente.

classList: la forma correcta de gestionar clases

En lugar de leer y sobreescribir el atributo class entero, usa los métodos de classList:

classList.add

Añade una clase sin tocar las que ya existen:

classList.remove

Elimina una clase específica:

classList.toggle

Añade la clase si no está, la quita si ya está. Perfecto para estados que se alternan (visible/oculto, expandido/colapsado):

classList.contains

Comprueba si un elemento tiene una clase. Devuelve true o false:

style: ajustes puntuales en línea

Para cambios de estilo que no encajan bien en una clase CSS, puedes modificar propiedades directamente:

Las propiedades CSS con guión se escriben en camelCase:

  • background-color → backgroundColor
  • border-radius → borderRadius
  • font-size → fontSize

Cuándo usar classList y cuándo style

SituaciónUsa
Estado visual predefinido en CSSclassList
Valor calculado dinámicamentestyle
Muchas propiedades a la vezclassList con una clase
Una propiedad sueltastyle directamente

La regla general: define los estados visuales en CSS y actívalos con classList. Usa style solo cuando el valor depende de un cálculo en JavaScript (por ejemplo, un porcentaje dinámico o una posición calculada).

Tu desafío 🚀

  1. Selecciona #caja
  2. Añade la clase activo con classList.add
  3. Quita o alterna la clase panel con remove o toggle
  4. Cambia al menos una propiedad visual con style

Controlar clases y estilos desde JS es la base del feedback visual en cualquier interfaz.